los linear-gradient() CSS La función crea una imagen que consiste en una transición progresiva entre dos o más colores a lo largo de una línea recta. Su resultado es un objeto de la <gradient> tipo de datos, que es un tipo especial de <image>.

Sintaxis

/* A gradient tilted 45 degrees,
   starting blue and finishing red */
linear-gradient(45deg, blue, red);

/* A gradient going from the bottom right to the top left corner,
   starting blue and finishing red */
linear-gradient(to left top, blue, red);

/* Color stop: A gradient going from the bottom to top,
   starting blue, turning green at 40% of its length,
   and finishing red */
linear-gradient(0deg, blue, green 40%, red);

/* Color hint: A gradient going from the left to right,
   starting red, getting to the midpoint color
   10% of the way across the length of the gradient,
   taking the rest of the 90% of the length to change to blue */
linear-gradient(.25turn, red, 10%, blue);

/* Multi-position color stop: A gradient tilted 45 degrees,
   with a red bottom-left half and a blue top-right half,
   with a hard line where the gradient changes from red to blue */
linear-gradient(45deg, red 0 50%, blue 50% 100%);

Valores

<side-or-corner>
La posición del punto de inicio de la línea de degradado. Si se especifica, consta de la palabra to y hasta dos palabras clave: una indica el lado horizontal (left o right), y el otro el lado vertical (top o bottom). El orden de las palabras clave laterales no importa. Si no se especifica, el valor predeterminado es 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 degradado. Un valor de 0deg es equivalente a to top; los valores crecientes giran en el sentido de las agujas del reloj desde allí.
<linear-color-stop>
Una parada de color <color> valor, seguido de una o dos posiciones de parada opcionales, (cada una de las cuales es un <percentage> o un <length> a lo largo del eje del gradiente).
<color-hint>
La sugerencia de color es una sugerencia de interpolación que define cómo progresa el degradado entre las paradas de color adyacentes. La longitud define en qué punto entre dos paradas de color el color degradado debe alcanzar el punto medio de la transición de color. Si se omite, el punto medio de la transición de color es el punto medio entre dos paradas de color.

Nota: La representación de las paradas de color en degradados CSS sigue las mismas reglas que las paradas de color en Degradados SVG.

Tenga en cuenta también que el primer ejemplo anterior no se procesa exactamente como se muestra en Mozilla Firefox (en particular, la versión 80.0b3). Tendrá que establecer la propiedad de altura html en 100% o 100vh para renderizar como se muestra.

Descripción

Como ocurre 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 degradado lineal que se repite para llenar su contenedor, use el repeating-linear-gradient() función en su lugar.

Porque <gradient>s pertenecen a la <image> tipo de datos, solo se pueden utilizar cuando <image>Se pueden utilizar s. Por esta razón, linear-gradient() no funcionará en background-color y otras propiedades que utilizan el <color> tipo de datos.

Composición de un gradiente lineal

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

gradiente-lineal.png

La línea de degradado está definida por el centro del cuadro que contiene la imagen de degradado y por un ángulo. Los colores del degradado están determinados por dos o más puntos: el punto de inicio, el punto final y, en el medio, puntos de parada de color opcionales.

los punto de partida es la ubicación en la línea de degradado donde comienza el primer color. los punto final es el punto donde termina el último color. Cada uno de estos dos puntos está definido 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 puede entenderse como el punto simétrico del punto de partida. Estas definiciones algo complejas conducen a un efecto interesante a veces llamado rincones mágicos: las esquinas más cercanas a los puntos inicial y final tienen el mismo color que sus respectivos puntos inicial o final.

Personalización de degradados

Al agregar más puntos de parada de color en la línea de degradado, puede crear una transición altamente personalizada entre varios colores. La posición de una parada de color se puede definir explícitamente utilizando un <length> o un <percentage>. Si no especifica la ubicación de un color, se coloca a medio camino entre el que le precede y el que le 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%);

De forma predeterminada, los colores cambian suavemente desde el color en una parada de color hasta el color en la siguiente parada de color, siendo el punto medio entre los colores el punto medio entre la transición de color. Puede mover este punto medio a cualquier posición entre dos paradas de color agregando una sugerencia de% de color sin etiquetar entre los dos colores para indicar dónde debería estar el centro de la transición de color. El siguiente ejemplo es rojo sólido desde el principio hasta la marca del 10% y azul sólido desde el 90% hasta el final. Entre el 10% y el 90%, las transiciones de color del rojo al azul, sin embargo, el punto medio de la transición está en la marca del 30% en lugar del 50%, como hubiera sucedido sin la sugerencia de color del 30%.

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

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

Las paradas de color deben enumerarse en orden ascendente. Las siguientes paradas de color de valor más bajo anularán el valor de la parada de color anterior creando una transición difícil. Los siguientes cambios de rojo a amarillo en la marca del 30%, y luego pasa de amarillo a azul sobre el 35% del gradiente

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

Se permiten paradas de color de varias posiciones. Un color se puede declarar como dos paradas 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 ningún color con una parada del 0%, el primer color declarado será en ese punto. De manera similar, el último color continuará hasta la marca del 100%, o estará en la marca del 100% si no se ha declarado ninguna longitud en esa última parada.

Ejemplos de

Gradiente en un ángulo de 45 grados

body {
  background: linear-gradient(45deg, red, blue);
}

Degradado que comienza en el 60% de la línea de degradado

body {
  background: linear-gradient(135deg, orange 60%, cyan);
}

Degradado con paradas de color de varias posiciones

Este ejemplo utiliza paradas de color de varias posiciones, con colores adyacentes que tienen el mismo valor de parada de color, creando un efecto de rayas.

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

Más ejemplos de gradiente lineal

Consulte Uso de degradados CSS para obtener más ejemplos.

Especificaciones

Especificación Estado Comentario
Módulo de Imágenes CSS Nivel 4
La definición de ‘Gradient Color-Stops’ en esa especificación.		 Borrador de trabajo Agrega sugerencias de interpolación.
Módulo de Imágenes CSS Nivel 3
La definición de ‘lineal-gradiente ()’ en esa especificación.		 Recomendación candidata Definición inicial.

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
linear-gradient()

26 10

12

16 Antes de Firefox 36, los degradados no se aplicaban en el espacio de color pre-multiplicado, lo que provocaba que aparecieran sombras de gris inesperadamente cuando se usaba con transparencia. 3.6
[“Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.”, “Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.”]
49 44

10 gradientes compatibles con Internet Explorer 5.5 a 9.0 a través de un filtro propietario: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().

12.1 11-15 Consideraciones <angle> para empezar por la derecha, en lugar de por la parte superior. Es decir, se consideró un ángulo de 0deg como indicador de dirección apuntando hacia la derecha. 15 Consideraciones <angle> para empezar por la derecha, en lugar de por la parte superior. Es decir, se consideró un ángulo de 0deg como indicador de dirección apuntando hacia la derecha.

6.1 5.1
[“Safari 4 was supporting an experimental -webkit-gradient(linear,…) function. It is more limited than the later standard version: you cannot specify both a position and an angle like in linear-gradient(). This old outdated syntax is still supported for compatibility purposes.”, “Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.”]

≤37 ≤37

26 18

16 Antes de Firefox 36, los degradados no se aplicaban en el espacio de color pre-multiplicado, lo que provocaba que aparecieran sombras de gris inesperadamente cuando se usaba con transparencia. 4
[“Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.”, “Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.”]
49 44

12.1 11-14 Consideraciones <angle> para empezar por la derecha, en lugar de por la parte superior. Es decir, se consideró un ángulo de 0deg como indicador de dirección apuntando hacia la derecha. 14 Consideraciones <angle> para empezar por la derecha, en lugar de por la parte superior. Es decir, se consideró un ángulo de 0deg como indicador de dirección apuntando hacia la derecha.

6.1 6
[“Safari 4 was supporting an experimental -webkit-gradient(linear,…) function. It is more limited than the later standard version: you cannot specify both a position and an angle like in linear-gradient(). This old outdated syntax is still supported for compatibility purposes.”, “Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.”]

1,5 1,0

doubleposition 71 79 64 No 58 12,1 71 71 64 50 12,2 10.0
interpolation_hints 40 79 36 No 27 6.1 40 40 36 27 6.1 4.0
to 26 12 10 10 12,1 6.1 ≤37 26 10 14 6.1 1,5
unitless_0_angle 26 12

55 46 Aceptado solo en -webkit-linear-gradient() y -moz-linear-gradient(), no linear-gradient().

No dieciséis 6.1 ≤37 26

55 46 Aceptado solo en -webkit-linear-gradient() y -moz-linear-gradient(), no linear-gradient().

14 6.1 1,5

Ver también

  • Usar degradados CSS
  • Otras funciones de gradiente: repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
  • <image>
  • element()
  • image()
  • image-set()
  • cross-fade()