Por qué los gradientes CSS siguen subutilizados
Los gradientes se introdujeron en CSS3 (2009). Los tres tipos resuelven problemas visuales diferentes:
linear-gradient()— transiciones a lo largo de una línea recta.radial-gradient()— transiciones que irradian desde un punto central.conic-gradient()— transiciones que giran alrededor de un punto central.
Los tres comparten la misma sintaxis de color stops pero difieren en geometría.
linear-gradient: la base
Un gradiente lineal hace la transición de colores a lo largo de una línea recta.
Sintaxis
El argumento de dirección controla el ángulo:
| Valor | Ángulo | Dirección |
|---|---|---|
| to bottom | 180deg | Arriba a Abajo (predeterminado) |
| to right | 90deg | Izquierda a Derecha |
| to bottom right | 135deg | Arriba-izquierda a Abajo-derecha |
| 45deg | 45deg | Abajo-izquierda a Arriba-derecha |
| 0.25turn | 90deg | Izquierda a Derecha (turn) |
Color stops: posiciones, longitudes y transiciones duras
Las transiciones duras se crean colocando dos stops en la misma posición.
red 20% 40% equivale a red 20%, red 40%.
El color hint: control del punto medio
El color hint desplaza el punto medio de interpolación entre dos stops.
repeating-linear-gradient
repeating-linear-gradient() repite el patrón infinitamente.
radial-gradient: circular y elíptico
Un gradiente radial irradia desde un punto central, creando por defecto una elipse.
Sintaxis
El primer argumento controla forma y tamaño. at <posición> mueve el centro.
Forma y palabras clave de tamaño
La palabra clave de tamaño define dónde termina el gradiente:
farthest-corner(predeterminado) — hasta la esquina más lejana.closest-corner— hasta la esquina más cercana.farthest-side— hasta el lado más lejano.closest-side— hasta el lado más cercano.
Posicionando el centro
at acepta cualquier valor de posición CSS válido.
conic-gradient: el recién llegado
conic-gradient() fue el último en llegar. Sus transiciones giran alrededor de un punto central.
Sintaxis
<code>from <ángulo></code> rota el inicio. <code>at <posición></code> desplaza el centro.
Para qué sirven realmente los conic gradients
- Gráficos de tarta — sin JavaScript.
- Ruedas de color — de hsl(0deg) a hsl(360deg).
- Patrones angulares — con repeating-conic-gradient.
- Anillos de progreso — con border-radius: 50%.
repeating-conic-gradient
repeating-conic-gradient() repite el patrón angular.
Patrones avanzados
Técnicas que van más allá del uso estándar.
Fondos rayados
Gradientes de stop duro con background-size crean rayas escalables.
Texto degradado
background: gradiente, -webkit-background-clip: text, color: transparent.
Mesh gradients
Múltiples radiales superpuestos. Usa el PixCode Color Palette Generator.
Tablero con conic-gradient
repeating-conic-gradient(#000 0% 25%, transparent 0% 50%) con background-size.
Comparación directa
| Característica | linear-gradient | radial-gradient | conic-gradient |
|---|---|---|---|
| Modelo de dirección | Línea recta | Radial desde centro | Barrido angular |
| Variante repeating | repeating-linear-gradient | repeating-radial-gradient | repeating-conic-gradient |
| Color hint | Sí | Sí | Sí |
| Inset | No | No | No |
| Casos de uso | Fondos, botones | Focos, brillos | Tartas, ruedas |
Consideraciones de rendimiento
Los gradientes son baratos pero algunos patrones causan repaints:
Gradientes estáticos. Como background-image. Repeating.
Animar color stops. Superficies grandes con muchos radiales. Texto degradado pequeño.
Nunca animes background directamente. Usa pseudo-elemento con opacity o transform.
Accesibilidad y contraste
El texto sobre gradientes debe cumplir WCAG AA en cada punto.
Prueba en el punto más claro. Overlay: background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%).