Gradiente CSS

Sfondo di gradiente

I gradienti CSS ti permettono di visualizzare una transizione fluida tra due o più colori specificati.

CSS definisce due tipi di gradienti:

  • Gradiente lineare((in basso/su/destra/sinistra/diagonale))
  • Gradiente radiale((definito dal suo centro))

Gradiente lineare CSS

Per creare un gradiente lineare, è necessario definire almeno due punti di colore. I punti di colore sono i colori che si desidera presentare con una transizione fluida. È anche possibile impostare il punto di partenza e la direzione (o l'angolo) e l'effetto del gradiente.

Sintassi

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Gradiente lineare - da alto a basso (predefinito)

Esempio di gradiente lineare che parte dall'alto. Comincia dal rosso e si trasforma in giallo:

Da alto a basso (predefinito)}

Esempio

#grad {
  background-image: linear-gradient(red, yellow);
}

Prova personalmente

Gradiente lineare - Da sinistra a destra

Esempio seguente mostra un gradiente lineare che parte da sinistra. Comincia dal rosso e si trasforma in giallo:

Da sinistra a destra

Esempio

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

Prova personalmente

Gradiente lineare - Diagonale

È possibile realizzare un gradiente diagonale specificando la posizione iniziale orizzontale e verticale.

Esempio seguente mostra un gradiente lineare che parte dall'angolo in alto a sinistra (fino a basso a destra). Comincia dal rosso e si trasforma in giallo:

Da alto a sinistra a basso a destra

Esempio

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

Prova personalmente

Utilizzo dell'angolo

Se si desidera avere più controllo sugli angoli del gradiente, è possibile definire un angolo per sostituire le direzioni predefinite (in basso, in alto, a destra, a sinistra, in basso a destra, ecc.). Il valore 0deg è uguale a in alto (to top). Il valore 90deg è uguale a a destra (to right). Il valore 180deg è uguale a in basso (to bottom).

180deg

Sintassi

background-image: linear-gradient(angle, color-stop1, color-stop2);

Questo angolo specifica l'angolo tra la linea orizzontale e la linea di gradiente.

Esempio seguente mostra come utilizzare l'angolo nel gradiente lineare:

Esempio

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

Prova personalmente

Utilizzo di più colori

Esempio seguente mostra un gradiente lineare con più colori (da alto a basso):

Esempio

#grad {
  background-image: linear-gradient(red, yellow, green);
}

Prova personalmente

Esempio seguente mostra come creare un gradiente lineare (da sinistra a destra) utilizzando colori arcobaleno e alcuni testi:

Sfondo di gradiente

Esempio

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); 
}

Prova personalmente

Utilizzo della trasparenza

CSS gradienti supporta anche la trasparenza e può essere utilizzato per creare effetti di gradienti.

Per aggiungere trasparenza, utilizziamo la funzione rgba(). L'ultimo parametro della funzione rgba() può essere un valore tra 0 e 1 e definisce la trasparenza del colore: 0 indica trasparenza completa, 1 indica colore completo (nessuna trasparenza).

L'esempio seguente mostra un gradiente lineare che parte da sinistra. Comincia completamente trasparente, poi过渡为全色红色：

Esempio

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Prova personalmente

Gradiente lineare ripetuto

repeating-linear-gradient() La funzione utilizzata per il gradiente lineare ripetuto:

Esempio

Gradiente lineare ripetuto:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Prova personalmente