Generador de degradados CSS

Cómo usar Generador de degradados CSS

1. Elige el tipo de degradado y su dirección.
2. Ajusta los colores y sus posiciones.
3. Copia el CSS resultante.

Los tres tipos

CSS ofrece tres funciones de degradado, y cada una resuelve un problema distinto.

linear-gradient avanza en línea recta. Se le indica un ángulo, donde 0deg va de abajo hacia arriba y 90deg de izquierda a derecha, o una palabra clave como "to right".

radial-gradient parte de un punto y se expande. Sirve para focos de luz y para viñetas suaves, y se puede controlar su forma (circle o ellipse) y su tamaño.

conic-gradient gira alrededor de un punto. Es el que permite hacer gráficos de sectores, ruedas de color y efectos de borde giratorio sin imágenes.

Los tres tienen versión repeating- que repite el patrón, útil para rayas y texturas, aunque conviene usarla con moderación.

Y los tres se pueden apilar: varios degradados separados por comas en background-image, con el primero encima. Combinar un degradado semitransparente sobre otro es la forma habitual de conseguir profundidad.

El problema del gris en el centro

Si tu degradado entre dos colores vivos pasa por un centro apagado, esta es la razón.

La interpolación por defecto ocurre en el espacio sRGB, y el camino recto entre dos tonos alejados atraviesa la zona desaturada del espacio de color.

El caso clásico es de azul a amarillo: el punto medio sale de un gris verdoso sucio en lugar del verde que uno esperaría.

La solución moderna es indicar el espacio de interpolación: linear-gradient(in oklch, azul, amarillo). Al interpolar en OKLCH el recorrido mantiene la saturación y el resultado es mucho más limpio.

También se puede añadir "shorter hue" o "longer hue" para decidir por qué lado del círculo cromático pasa la transición, lo que cambia completamente los tonos intermedios.

Si necesitas compatibilidad con navegadores antiguos, la alternativa clásica es añadir uno o dos colores intermedios a mano para forzar el recorrido por donde quieres.

Bandas, rendimiento y accesibilidad

Tres cuestiones prácticas que aparecen al llevar el degradado a producción.

Las bandas — esas franjas visibles en transiciones suaves y amplias — se deben a la precisión de 8 bits por canal. Se notan sobre todo en degradados grandes entre tonos muy próximos.

La solución habitual es superponer una textura de ruido muy sutil, que rompe las bandas visualmente. También ayuda evitar degradados enormes entre colores casi idénticos.

Sobre rendimiento: los degradados en CSS se renderizan muy bien, pero animar background-image obliga a recalcular en cada fotograma. Para animar, mueve el degradado con transform o anima la posición del fondo, no los colores.

Y la parte más olvidada: el texto sobre un degradado tiene contraste variable. Puede cumplir el nivel AA en un extremo y fallar en el otro. Comprueba el contraste en el punto más desfavorable, no solo en el centro.

Si el degradado es puramente decorativo, no hace falta más. Pero si lleva texto encima, plantéate una capa sólida semitransparente detrás del texto.

Preguntas frecuentes