Degradado lineal CSS: guía completa de linear-gradient()

Un degradado lineal CSS es una imagen que el navegador dibuja a lo largo de una línea recta, mezclando de un color al siguiente. Lo escribes con la función linear-gradient() y lo usas donde CSS acepte una imagen, casi siempre background-image. No necesita archivo, escala a cualquier tamaño sin desenfocarse y no cuesta nada descargarlo. La versión útil más corta son dos colores: linear-gradient(#0f172a, #38bdf8) pasa de un azul marino profundo arriba a un azul cielo abajo.

.hero {
  background-color: #0f172a; /* shown if the gradient fails */
  background-image: linear-gradient(#0f172a, #38bdf8);
}

Esta guía repasa cada parte de la función en el orden en que se encuentran. Si quieres el panorama más amplio de cómo se comparan los degradados lineales con los radiales, cónicos y de malla, empieza por los tipos de degradado.

La sintaxis de linear-gradient()

La función admite una dirección opcional, un método opcional de interpolación de color y después una lista de al menos dos puntos de color. Todo se separa con comas salvo la dirección y el método de interpolación, que comparten el primer argumento.

La referencia completa está en la página de linear-gradient() de MDN, que también documenta la gramática exacta de la especificación CSS Images.

Ángulos del degradado y palabras clave de dirección

Los ángulos siguen una brújula: 0deg apunta hacia arriba, 90deg hacia la derecha, 180deg hacia abajo y 270deg hacia la izquierda. El degradado empieza en el lado opuesto y viaja hacia la dirección que indiques, así que 90deg va de izquierda a derecha. También puedes escribir turn, rad o grad, donde 0.25turn equivale a 90deg. El valor por defecto, cuando no indicas nada, es to bottom.

Las palabras clave de esquina no son lo mismo que los ángulos de 45 grados. to top right inclina la línea para que el color del medio pase justo entre las otras dos esquinas, sea cual sea la forma de la caja. En un banner ancho esa línea es mucho más plana que 45deg, que siempre apunta a 45 grados e ignora la forma de la caja. Usa palabras clave cuando la mezcla deba respetar las esquinas y ángulos cuando varios elementos de formas distintas deban compartir una dirección. Hay más sobre cómo elegir direcciones en los ángulos de degradado.

Puntos de color, posiciones y pistas

Los puntos sin posición se reparten por igual, así que tres colores quedan en 0%, 50% y 100%. Dale a un punto una posición en porcentaje o una longitud para moverlo. Dale dos posiciones y el color se mantiene liso entre ellas. Pon un porcentaje suelto entre dos puntos y se convierte en una pista: el punto donde la mezcla alcanza su color intermedio, lo que hace un lado de la transición más rápido que el otro.

/* even spacing */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff);

/* a hint: the midpoint arrives early, at 20% */
background-image: linear-gradient(90deg, #0c4a6e, 20%, #22d3ee);

/* two positions: cyan holds solid from 35% to 65% */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee 35% 65%, #f0f9ff);

Cortes duros para rayas y divisiones

Cuando dos puntos comparten una posición no hay espacio para mezclar, así que obtienes un borde nítido. Los navegadores también ajustan un punto que va antes que el anterior, lo que da un atajo útil: #f97316 50%, #1e293b 0 significa que el segundo color empieza justo donde acaba el primero. Repite la idea con repeating-linear-gradient() y tienes rayas.

Apilar varios degradados en un mismo fondo

background-image acepta una lista separada por comas, y la primera imagen se pinta encima. Las capas solo se ven a través de las otras donde son transparentes, así que los degradados superiores suelen desvanecerse a transparent. Los navegadores modernos mezclan con alfa premultiplicado, así que desvanecerse a transparent ya no arrastra un matiz gris al color como antes. Combina capas con background-size y background-repeat cuando una capa deba cubrir solo parte de la caja.

.card {
  background-color: #111827;
  background-image:
    /* top: a soft sheen across the upper third */
    linear-gradient(180deg, rgb(255 255 255 / 0.12), transparent 35%),
    /* bottom: the colour itself */
    linear-gradient(135deg, #312e81, #7c3aed 55%, #db2777);
}

Apilar es también la base de efectos más ricos: los resplandores radiales en capas forman un degradado de malla en CSS, y una fina capa de ruido encima oculta los escalones, como explica el banding en degradados.

Mezclas más suaves con interpolación de color

Cuando todos los colores están escritos en un formato heredado, como hex, rgb() o hsl(), el navegador mezcla en sRGB por compatibilidad. Las mezclas sRGB entre tonos distantes pasan por medios apagados y grisáceos: de azul a amarillo es el caso clásico. Añadir in oklab o in oklch pide un espacio de color perceptual, que mantiene el medio más claro y uniforme. La guía dedicada a los degradados OKLCH en CSS cubre las direcciones de tono y las alternativas.

Compatibilidad con navegadores y alternativas

linear-gradient() funciona sin prefijo en todos los navegadores actuales, así que las viejas versiones con -webkit- pueden irse. Los métodos de interpolación, los puntos de dos posiciones y las pistas son más recientes; consulta caniuse para los detalles. El patrón más seguro es un background-color plano primero, luego el degradado y después cualquier versión mejorada en una declaración posterior, que los navegadores antiguos omiten porque no pueden interpretarla.

.banner {
  background-color: #1e3a8a;
  background-image: linear-gradient(90deg, #1e3a8a, #f59e0b);
  /* browsers that understand interpolation methods use this line */
  background-image: linear-gradient(90deg in oklch, #1e3a8a, #f59e0b);
}

Si prefieres partir de una mezcla que ya tiene carácter en lugar de ajustar los puntos a mano, un generador de degradados o una biblioteca de fondos ya hechos ahorra tiempo. De un modo u otro, quédate con el código: un degradado en CSS se ve nítido a cualquier tamaño y pesa unos pocos bytes.