El gradiente lineal en CSS es una característica que te permite mostrar dos o más colores en una transición suave. Aquí se muestra cómo se puede usar:
Sintaxis Básica:
```css
background-image: linear-gradient(dirección, color-stop1, color-stop2, …);
```
- Dirección: Es la dirección del gradiente. Puede ser un ángulo, o una de las siguientes palabras clave: to top, to bottom, to left, to right, to top left, etc. Si omites este valor, por defecto se asume “to bottom”.
- Color-stop: Son los colores que quieres mostrar en el gradiente. Debes indicar al menos dos.
Aquí hay un ejemplo de cómo usarlo.
```css
body {
background-image: linear-gradient(red, yellow);
}
```
En este ejemplo, el gradiente comenzará en rojo en la parte superior del cuerpo y se desvanecerá hasta el amarillo en la parte inferior.
También puedes especificar la dirección en que quieres que vaya tu gradiente:
```css
body {
background-image: linear-gradient(to right, red, yellow);
}
```
Podrás crear transiciones más complicadas añadiendo más colores:
```css
body {
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
```
Este gradiente comenzará en rojo en la izquierda y cambiará a través de todos los colores del arco iris hasta violeta en la parte derecha.
