Функción linear-gradient

La función linear-gradient define un gradiente lineal. Se aplica a propiedades que definen una imagen de fondo: background, background-image o una imagen de borde: border-image, background-image-source.

Sintaxis

cssselector {
  background: linear-gradient([ángulo o dirección], color1 tamaño1, color2 tamaño2...);
}

Valores

Ejemplo . La opción más simple

Sintaxis:

cssselector {
  background: linear-gradient(color inicial, color final);
}

Veamos un ejemplo:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(black, red);
  width: 200px;
  height: 200px;
}

Результат:

Ejemplo . Añadiendo un ángulo

Sintaxis:

cssselector {
  background: linear-gradient(ángulo, color inicial, color final);
}

Veamos un ejemplo:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(45deg, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Ejemplo . Añadiendo una dirección

En lugar de un ángulo se puede añadir una dirección top, left, right, bottom o su combinación: top left, top right Antes de la dirección se coloca la palabra to.

Sintaxis:

cssselector {
  background: linear-gradient(dirección, color inicial, color final);
}

Veamos un ejemplo:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Ejemplo . Añadiendo una dirección

Especificamos otra dirección:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to top left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Ejemplo . Añadiendo tamaño

Sintaxis:

cssselector {
  background: linear-gradient(color1 tamaño1, color2 tamaño2);
}

En el siguiente ejemplo el comportamiento será el siguiente: color rojo puro será de 0px a 30px, de 30px a 50px habrá un gradiente de rojo a azul, y de 50px hasta el final - azul puro:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 30px, blue 50px);
  width: 200px;
  height: 200px;
}

Результат:

Ejemplo . Añadiendo más de 2 colores

Sintaxis:

cssselector {
  background: linear-gradient(color1 tamaño1, color2 tamaño2, color3 tamaño3...);
}

En el siguiente ejemplo el comportamiento será el siguiente: color rojo puro será de 0px a 30px, de 30px a 50px habrá un gradiente de rojo a azul, y de 50px a 70px - gradiente de azul a verde, y después de 70px - verde puro:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 30px, blue 50px, green 70px);
  width: 200px;
  height: 200px;
}

Результат:

Ejemplo . Transiciones bruscas

En el siguiente ejemplo el comportamiento será el siguiente: color rojo puro será de 0px a 30px, azul puro - de 30px a 60px, verde puro - después de 60px (red 0px se puede omitir):

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
  width: 200px;
  height: 200px;
}

Результат:

Ejemplo . Los tamaños también se pueden especificar en porcentajes

En el siguiente ejemplo el comportamiento será el siguiente: color rojo puro será de 0% a 30%, azul puro - de 30% a 60%, verde puro - después de 60% (red 0% se puede omitir):

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
  width: 200px;
  height: 200px;
}

Результат:

Ejemplo . Combinación con background-size

En el siguiente ejemplo el comportamiento será el siguiente: color rojo puro será de 0px a 30px, azul puro - de 30px a 60px, y todo esto se repetirá en fragmentos de 60px (debido a background-size: 60px;):

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
  background-size: 60px 60px;
  width: 200px;
  height: 200px;
}

Результат:

Véase también