Generador de degradados CSS
Diseña degradados visualmente y copia el CSS.
Crea degradados lineales o radiales con dos colores, un ángulo y una posición de parada. Mira la vista previa mientras ajustas y copia la declaración CSS terminada.
135°
100%
Color inicial
Color final
background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);Cómo crear un degradado
- Elige lineal o radial como tipo de degradado.
- Selecciona tus dos colores con los selectores.
- Ajusta el ángulo y la posición de parada con los deslizadores.
- Copia el CSS generado y pégalo en tu hoja de estilos.
Preguntas frecuentes
¿Cuál es la diferencia entre lineal y radial?
Un degradado lineal fluye en una dirección a lo largo de una línea recta, mientras que uno radial se extiende desde un punto central.
¿Puedo usar el resultado en estilos en línea?
Sí. Copia la declaración background en cualquier regla CSS o atributo style.
¿Los colores salen de mi navegador?
No. El generador funciona por completo en tu dispositivo sin subidas.