Función CSS gradiente lineal ()
Ejemplo
Este degradado lineal comienza en la parte superior. Comienza en rojo, pasa a amarillo y luego a azul:
#grad {
background-image: linear-gradient(red, yellow, blue);
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La función linear-gradient() establece un degradado lineal como imagen de fondo.
Para crear un degradado lineal, debe definir al menos dos paradas de color. Las paradas de color son los colores entre los que desea generar transiciones suaves. También puede establecer un punto de partida y una dirección (o un ángulo) junto con el efecto de degradado.
Ejemplo de gradiente lineal:
Versión: | CSS3 |
---|
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la función.
Los números seguidos de -webkit-, -moz- o -o- especifican la primera versión que funcionó con un prefijo.
Function | |||||
---|---|---|---|---|---|
linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
Sintaxis CSS
background-image: linear-gradient(direction, color-stop1,
color-stop2, ...);
Value | Description |
---|---|
direction | Defines a starting point and a direction (or an angle) along with the gradient effect. |
color-stop1, color-stop2,... | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |
Más ejemplos
Ejemplo
Un degradado lineal que comienza desde la izquierda. Comienza en rojo, pasando a azul:
#grad {
background-image: linear-gradient(to right, red , blue);
}
Ejemplo
Un degradado lineal que comienza en la parte superior izquierda (y va hacia la parte inferior derecha):
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
Ejemplo
Un degradado lineal con un ángulo especificado:
#grad {
background-image: linear-gradient(180deg, red, blue);
}
Ejemplo
Un degradado lineal con múltiples paradas de color:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Ejemplo
Un degradado lineal con transparencia:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
páginas relacionadas
Tutorial de CSS: Gradientes de CSS