Generador de degradados CSS: para qué sirve
Escribir un degradado a mano obliga a editar el CSS, guardar y recargar hasta que el ángulo parece correcto. Este generador te da una vista previa en directo: elige el tipo, el ángulo y las paradas de color, observa el resultado y copia un CSS listo para producción, sin prefijos y compatible con todos los navegadores actuales.
Generador de degradados CSS: cómo se usa
- Elige un degradado lineal o radial.
- Ajusta el ángulo si es lineal.
- Añade paradas de color y mueve su posición.
- Copia el CSS generado directamente a tu hoja de estilos.
Preguntas frecuentes
¿Cómo funcionan los ángulos de los degradados en CSS?
0deg apunta hacia arriba y los ángulos aumentan en el sentido de las agujas del reloj, así que 90deg va de izquierda a derecha y 180deg de arriba abajo. Es distinto de la convención matemática y confunde a menudo.
¿Por qué mi degradado se ve apagado en el centro?
Porque interpolar en sRGB pasa por un punto intermedio desaturado, sobre todo entre colores complementarios. Añadir una parada intermedia o usar la interpolación en oklch de los navegadores modernos lo soluciona.
¿Todavía hacen falta prefijos de navegador?
No. linear-gradient y radial-gradient sin prefijo funcionan en todos los navegadores actuales desde hace años. Los prefijos solo añaden peso.
¿Se puede animar un degradado?
No directamente con una transición, porque background-image no se interpola. El truco habitual es animar background-position sobre un degradado más grande o usar propiedades personalizadas registradas con @property.