linear-gradient()

<lado-o-esquina>

La posición del punto de inicio de la línea de gradiente. Si se especifica, consiste en la palabra to y hasta dos palabras clave: una indica el lado horizontal (left o right), y la otra el lado vertical (top o bottom). El orden de las palabras clave de los lados no importa. Si no se especifica, se asume to bottom.

Los valores to top, to bottom, to left, y to right son equivalentes a los ángulos 0deg, 180deg, 270deg, y 90deg, respectivamente. Los otros valores se traducen en un ángulo.

<angle>

El ángulo de dirección de la línea de gradiente. Un valor de 0deg es equivalente a to top; los valores crecientes giran en el sentido de las agujas del reloj a partir de ahí.

<parada-de-color>

Un valor de <color> para una parada de color, seguido de una o dos posiciones de parada opcionales, (cada una siendo un <percentage> o una <length> a lo largo del eje del gradiente).

<sugerencia-de-color>

Una sugerencia de interpolación que define cómo progresa el gradiente entre paradas de color adyacentes. La longitud define en qué punto entre dos paradas de color el gradiente debe alcanzar el punto medio de la transición de color. Si se omite, el punto medio de la transición es el punto medio entre dos paradas de color.

Como con cualquier gradiente, un gradiente lineal no tiene dimensiones intrínsecas; es decir, no tiene un tamaño natural o preferido, ni una proporción preferida. Su tamaño concreto coincidirá con el tamaño del elemento al que se aplica.

Para crear un gradiente lineal que se repita para llenar su contenedor, use la función repeating-linear-gradient() en su lugar.

Debido a que los <gradient> pertenecen al tipo de datos <image>, solo se pueden usar donde se pueden usar <image>. Por esta razón, linear-gradient() no funcionará en background-color y otras propiedades que usan el tipo de datos <color>.

Un gradiente lineal se define por un eje—la línea de gradiente—y dos o más puntos de parada de color. Cada punto en el eje es un color distinto; para crear un gradiente suave, la función linear-gradient() dibuja una serie de líneas coloreadas perpendiculares a la línea de gradiente, cada una de las cuales coincide con el color del punto donde se cruza con la línea de gradiente.

La línea de gradiente se define por el centro de la caja que contiene la imagen de gradiente y por un ángulo. Los colores del gradiente se determinan mediante dos o más puntos: el punto de inicio, el punto final y, en medio, puntos de parada de color opcionales.

El punto de inicio es la ubicación en la línea de gradiente donde comienza el primer color. El punto final es el punto donde termina el último color. Cada uno de estos dos puntos se define por la intersección de la línea de gradiente con una línea perpendicular que pasa desde la esquina de la caja que está en el mismo cuadrante. El punto final se puede entender como el punto simétrico del punto de inicio. Estas definiciones algo complejas conducen a un efecto interesante que a veces se llama esquinas mágicas: las esquinas más cercanas a los puntos de inicio y final tienen el mismo color que sus respectivos puntos de inicio o final.

Agregando más puntos de detención de color en la línea del gradiente, puedes crear una transición altamente personalizada entre múltiples colores. La posición de un punto de detención de color se puede definir explícitamente usando una <longitud> o un <porcentaje>. Si no especificas la ubicación de un color, se coloca a mitad de camino entre el que lo precede y el que lo sigue. Los siguientes dos gradientes son equivalentes.

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

Por defecto, los colores hacen una transición suave del color en un punto de detención al color en el punto de detención siguiente, siendo el punto medio entre los colores el punto intermedio de la transición de color. Puedes mover este punto medio a cualquier posición entre dos puntos de detención agregando una sugerencia de color % sin etiquetar entre los dos colores para indicar dónde debería estar el medio de la transición de color. El siguiente ejemplo es rojo sólido desde el inicio hasta el 10% y azul sólido desde el 90% hasta el final. Entre el 10% y el 90% el color hace una transición de rojo a azul; sin embargo, el punto medio de la transición está en el 30% en lugar de en el 50%, como sucedería sin la sugerencia de color del 30%.

linear-gradient(red 10%, 30%, blue 90%);

Si dos o más puntos de detención de color están en la misma ubicación, la transición será una línea dura entre el primer y último color declarado en esa ubicación.

Los puntos de detención de color deben listarse en orden ascendente. Los puntos de detención de color posteriores con un valor menor sobrescribirán el valor del punto de detención de color anterior, creando una transición dura. El siguiente ejemplo cambia de rojo a amarillo en el 40%, y luego hace una transición de amarillo a azul sobre el 25% del gradiente:

linear-gradient(red 40%, yellow 30%, blue 65%);

Se permiten puntos de detención de color con múltiples posiciones. Un color puede declararse como dos puntos de detención de color adyacentes al incluir ambas posiciones en la declaración CSS. Los siguientes tres gradientes son equivalentes:

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

De forma predeterminada, si no hay un color con un punto de detención en 0%, el primer color declarado estará en ese punto. De manera similar, el último color continuará hasta el 100%, o estará en el 100% si no se ha declarado una longitud en ese último punto de detención.

<linear-gradient()> = 
  linear-gradient( [ <linear-gradient-syntax> ] )  

<linear-gradient-syntax> = 
  [ <angle> | to <side-or-corner> ]? , <color-stop-list>  

<side-or-corner> = 
  [ left | right ]  ||
  [ top | bottom ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?  

<linear-color-stop> = 
  <color> <length-percentage>?  

<linear-color-hint> = 
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>  

<div class="shorter">menor arco de matiz</div>
<div class="longer">mayor arco de matiz</div>

div {
  height: 50vh;
  color: white;
  font-weight: bolder;
}

En este ejemplo de interpolación, se utiliza el sistema de color hsl y se está interpolando el matiz.

.shorter {
  background: linear-gradient(90deg in hsl shorter hue, red, blue);
}

.longer {
  background: linear-gradient(90deg in hsl longer hue, red, blue);
}

La caja en la parte superior usa la interpolación menor, lo que significa que el color pasa directamente de rojo a azul utilizando el arco más corto en la rueda de color. La caja en la parte inferior usa la interpolación mayor, lo que significa que el color pasa de rojo a azul usando el arco más largo, atravesando verdes, amarillos y naranjas.

Este ejemplo usa puntos de detención de color en varias posiciones, con colores adyacentes que tienen el mismo valor de punto de detención de color, creando un efecto de rayas.

body {
  width: 100vw;
  height: 100vh;
}

body {
  background: linear-gradient(
    to right,
    red 20%,
    orange 20% 40%,
    yellow 40% 60%,
    green 60% 80%,
    blue 80%
  );
}

Consulta uso de gradientes CSS para obtener más ejemplos.

• Uso de degradados CSS
• Otras funciones de gradiente: repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
• <hue-interpolation-method>
• <color-interpolation-method>
• <image>
• Módulo de imágenes CSS