jueves, 2 de febrero de 2023

CSS3 06 Gradientes

CSS3 06 Gradientes

Otra funcionalidad que se echaba mucho de menos en versiones anteriores de CSS era la de utilizar fondos con gradientes, o lo que es lo mismo, un color inicial que se transforma poco a poco en uno o varios colores sucesivamente. Sin embargo, en versiones anteriores a CSS3 no era posible hacerlo desde código.

En CSS3 se introducen algunas expresiones relacionadas que harán esta tarea algo muy sencillo, pudiendo utilizarlas fácilmente con la propiedad background-image.

Gradientes lineales

El primer tipo de gradiente es el gradiente lineal, que permite crear fondos con los colores gradientes indicados y una cierta dirección definida:

div {
    background-image: linear-gradient([dirección], [color1], [color2], ...)
}