Ejemplo
El siguiente ejemplo muestra un gradiente lineal que comienza en la parte superior. Se inicia rojo, la transición a amarillo, luego a azul:
#grad {
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */
background: -o-linear-gradient(red,yellow,blue); /*
Opera 11.1-12.0 */
background: -moz-linear-gradient(red,yellow,blue); /*
Firefox 3.6-15 */
background: linear-gradient(red,yellow,blue); /* Standard
syntax */
}
Inténtalo tú mismo " Definición y Uso
El linear-gradient() función crea una "image" que representa un gradiente lineal de colores.
Para crear un gradiente lineal debe definir al menos dos etapas de color. paradas de color son los colores que desee para hacer transiciones suaves entre. También puede establecer un punto de partida y una dirección (or an angle) junto con el efecto de degradado.
Ejemplo de Gradiente Lineal:
| Versión: | CSS3 |
|---|
Soporte para el 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 por -webkit-, -moz-, o -O- especifican la primera versión que funcionaba con un prefijo.
| Función | |||||
|---|---|---|---|---|---|
| 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: linear-gradient( direction , color-stop1 ,
color-stop2, ... );
| Valor | Descripción |
|---|---|
| direction | Define un punto de partida y una dirección (or an angle) junto con el efecto de la pendiente. |
| color-stop1, color-stop2,... | paradas de color son los colores que desee para hacer transiciones suaves entre. Este valor se compone de un valor de color, seguida de una posición de tope opcional (a percentage between 0% and 100% or a length along the gradient axis) . |
Más ejemplos
Ejemplo
Un gradiente lineal que empieza desde la izquierda. Se inicia rojo, la transición a azul:
#grad {
background: -webkit-linear-gradient(left,
red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, blue); /* Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , blue); /* Standard syntax */
} Inténtalo tú mismo " Ejemplo
Un gradiente lineal que comienza en la parte superior izquierda (and goes to bottom right) :
#grad {
background: -webkit-linear-gradient(left
top, red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, blue); /* Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red , blue); /* Standard syntax */
} Inténtalo tú mismo " Ejemplo
Un gradiente lineal con un ángulo especificado:
#grad {
background: -webkit-linear-gradient(180deg,
red, blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red,
blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg,
red, blue); /* Firefox 3.6 to 15 */
background:
linear-gradient(180deg, red, blue); /* Standard syntax */
} Inténtalo tú mismo " Ejemplo
Un gradiente lineal con múltiples etapas de color:
#grad {
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
} Inténtalo tú mismo " Ejemplo
Un gradiente lineal con la transparencia:
#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari
5.1-6*/
background:
-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
} Inténtalo tú mismo " Páginas relacionadas
CSS tutorial: CSS3 gradientes
Funciones Referencia CSS