<gradient>
Resumen
Pruébalo
Un gradiente de CSS no es un <color>
pero tampoco es una imagen con dimensiones intrínsecas; es decir, que no tiene tamaño natural o preferido, ni una relación preferida. Su tamaño concreto coincidirá con los elementos a los que se aplica.
Funciones de las Gradientes
Hay tres tipos de gradientes de color:
- Linear gradients(gradiente lineal), generados por la función
linear-gradient()
(en-US), donde el color se desvanece suavemente a lo largo de una línea imaginaria.A rainbow made from a gradient
body { background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet); }
- Radial gradient (gradientes radiales), generados por la función
radial-gradient()
(en-US). Cuanto más lejos de un origen sea un punto, más lejos del color original será.Radial gradient
body { background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent; background: radial-gradient(red, yellow, rgb(30, 144, 255)); }
- Repeating gradient (gradientes de repetición), donde se repiten gradientes lineales o radiales tanto como sea necesario para llenar toda la caja.
Repeating gradient
body { background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px); background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px); }
Interpolación
Al igual que con cualquier caso de interpolación de colores, los gradientes se calculan en el espacio de color alfa-premultiplicado. Esto impide que sombras de gris inesperadas aparezcan cuando el color o la opacidad están variando. (debe tener en cuenta que los navegadores mas antiguos no tienen incorporado este tipo de comportamient cuando utiliza la palabra clave "transparent " del inglés transparente ( para más información hacer clic en el link))
Especificación
Especificación | Estado | Comentario |
---|---|---|
CSS Images Module Level 3 La definición de '<gradient>' en esta especificación. |
Candidate Recommendation |
Compatibilidad del navegador
Cada tipo de gradiente tiene una matriz de compatibilidad diferente. Por favor, consulte cada artículo individualmente.