Il gradiente lineare nei CSS è una funzione che permette di creare una transizione graduale tra due o più colori lungo una linea retta. Questo può essere utilizzato per creare sfondi attraenti e interessanti per il tuo sito web o per altri elementi web.
Ecco un esempio semplice di come utilizzare il gradiente lineare in CSS:
```
body {
background: linear-gradient(to right, red , yellow);
}
```
In questo esempio, il colore dello sfondo del corpo passerà gradualmente dal rosso al giallo da sinistra a destra.
La sintassi generale del gradiente lineare è la seguente:
```
background: linear-gradient(direction, color-stop1, color-stop2, …);
```
- “Direction” può essere una parola chiave (come `to right`, `to left`, `to top`, `to bottom`, `to top right`, ecc.), oppure un angolo (come `0deg`, `90deg`, ecc.).
- I “color-stop” sono i colori che vuoi utilizzare nel tuo gradiente. Puoi elencare tutti i colori che vuoi, separati da virgole. Ogni color-stop può anche avere una posizione percentuale opzionale dopo il colore, che indica a che punto del gradiente dovrebbe comparire il colore (ad esempio, `red 10%`, `yellow 90%`).
Inoltre, è possibile creare gradienti lineari ripetuti utilizzando la funzione `repeating-linear-gradient()`. Questa funzione è molto simile a `linear-gradient()`, ma ripete i colori per riempire l’intero elemento.
