Hasta 2019 el CSS solo sabía repartir color en línea recta o desde un punto hacia fuera; el tercer tipo, el degradado cónico, es la incorporación más reciente a la especificación y todavía sorprende a quienes aprendieron CSS antes de esa fecha.
linear-gradient y radial-gradient: los clásicos
linear-gradient(45deg, red, blue) estira el color a lo largo de una línea recta en el ángulo indicado — el recurso más habitual en fondos de botones, banners y tarjetas. radial-gradient(circle, yellow, orange) lo reparte en círculos o elipses concéntricas desde un punto hacia fuera, ideal para simular un foco de luz.
conic-gradient: el recién llegado
conic-gradient(red, yellow, green, blue, red) gira el color alrededor de un punto central, como la manecilla de un reloj. Al añadirse a la especificación bastante después que los otros dos tipos, es el único capaz de construir un gráfico circular o un indicador de progreso en anillo sin recurrir a SVG ni a imágenes adicionales — algo que antes exigía trucos con múltiples fondos superpuestos.
Color stops y degradados repetidos
Cada color se puede anclar a un porcentaje exacto, como en linear-gradient(red 0%, yellow 50%, blue 100%), controlando no solo la paleta sino la brusquedad de la transición. Las funciones repeating-linear-gradient() y repeating-radial-gradient() repiten esa misma secuencia de stops automáticamente, generando rayas o patrones de tablero de ajedrez con una sola línea de CSS.
Para qué sirve esto
- Elegir y copiar código CSS de degradado listo para usar sin ajustar ángulos y colores a mano.
- Entender qué tipo de degradado conviene para un efecto visual concreto.
- Ajustar con precisión las posiciones de los color stops para la transición que buscas.
El regreso del degradado al diseño
Tras años de diseño plano impuesto por iOS 7 (2013) y Material Design, el degradado volvió con fuerza a mediados de la década pasada: el rediseño de Instagram en 2016 sustituyó su icono de cámara por una marca en degradado naranja-morado, y desde entonces la técnica del "mesh gradient" — manchas de color difuminadas sobre un fondo, popularizada por Figma a partir de 2022 — se volvió habitual en portadas de producto y branding de startups en el mundo hispanohablante y más allá.