Функ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
selector {
background: linear-gradient([ángulo o dirección], color1 tamaño1, color2 tamaño2...);
}
Valores
| Valor | Descripción |
|---|---|
| dirección |
Define una dirección específica del gradiente en cualquier unidad de ángulos
o con palabras clave top, left, right, bottom
o su combinación: top left, top right y así sucesivamente.
El orden de las palabras no importa: se puede escribir top left y left top,
no hay diferencia. El parámetro es opcional: si no se escribe, el gradiente irá
de arriba a abajo (como con to top). Antes de la dirección se coloca la palabra to.
|
| ángulo | Ángulo en cualquier unidad de ángulos. Puede ser positivo o negativo. El parámetro es opcional. Simultáneamente puede especificarse un ángulo o una dirección (o nada en absoluto). |
| color1 | Color inicial del gradiente en cualquier unidad de color. |
| color2 | Color final del gradiente en cualquier unidad de color. |
| tamaño | Define la extensión de un color específico del gradiente en cualquier unidad de tamaño. |
Ejemplo . La opción más simple
Sintaxis:
selector {
background: linear-gradient(color inicial, color final);
}
Veamos un ejemplo:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Ejemplo . Añadiendo un ángulo
Sintaxis:
selector {
background: linear-gradient(ángulo, color inicial, color final);
}
Veamos un ejemplo:
<div id="elem"></div>
#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:
selector {
background: linear-gradient(dirección, color inicial, color final);
}
Veamos un ejemplo:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Ejemplo . Añadiendo una dirección
Especificamos otra dirección:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Ejemplo . Añadiendo tamaño
Sintaxis:
selector {
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:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Ejemplo . Añadiendo más de 2 colores
Sintaxis:
selector {
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:
<div id="elem"></div>
#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):
<div id="elem"></div>
#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):
<div id="elem"></div>
#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;):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Véase también
-
la función
radial-gradient,
que crea un gradiente radial -
la función
repeating-linear-gradient,
que crea un gradiente lineal repetitivo -
la función
repeating-radial-gradient,
que crea un gradiente radial repetitivo
