I gradienti CSS consentono di visualizzare transizioni fluide tra due o più colori specificati.

I CSS definiscono tre tipi di gradienti:

• Gradienti lineari (va giù/su/sinistra/destra/diagonale)
• Gradienti radiali (definiti dal loro centro)
• Gradienti conici (ruotati attorno a un punto centrale)

Gradienti lineari CSS

Per creare una sfumatura lineare è necessario definire almeno due interruzioni di colore. Le interruzioni di colore sono i colori tra i quali desideri eseguire transizioni uniformi. Si può anche impostare un punto iniziale e una direzione (o un angolo) insieme all'effetto sfumatura.

Sintassi

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

Direzione: dall'alto in basso (impostazione predefinita)

L'esempio seguente mostra un gradiente lineare che inizia dall'alto. Inizia dal rosso, passando al giallo:

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

Visualizza esempio

Direzione: da sinistra a destra

L'esempio seguente mostra un gradiente lineare che inizia da sinistra. Inizia dal rosso, passando al giallo:

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

Visualizza esempio

Direzione - Diagonale

È possibile creare una sfumatura in diagonale specificando sia la posizione iniziale orizzontale che quella verticale.

L'esempio seguente mostra un gradiente lineare che inizia in alto a sinistra (e va in basso a destra). Inizia dal rosso, passando al giallo:

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

Visualizza esempio

Utilizzo degli angoli

Se desideri un maggiore controllo sulla direzione del gradiente, puoi definire un angolo, invece delle direzioni predefinite (in basso, in alto, a destra, a sinistra, in basso a destra, ecc.). Un valore di 0deg equivale a "to top". Un valore di 90 gradi equivale a "to right". Un valore di 180 gradi equivale a "to bottom".

Sintassi

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

L'esempio seguente mostra come utilizzare gli angoli sui gradienti lineari:

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

Visualizza esempio

Utilizzo di più interruzioni di colore

L'esempio seguente mostra una sfumatura lineare (dall'alto verso il basso) con più interruzioni di colore:

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

Visualizza esempio

L'esempio seguente mostra come creare un gradiente lineare (da sinistra a destra) con il colore dell'arcobaleno e del testo:

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

Visualizza esempio

Utilizzo della trasparenza

I gradienti CSS supportano anche la trasparenza, che può essere utilizzata per creare effetti di dissolvenza.

Per aggiungere trasparenza, utilizziamo la funzione rgba() per definire le interruzioni di colore. L'ultimo parametro nella funzione rgba() può essere un valore da 0 a 1 e definisce la trasparenza del colore: 0 indica la trasparenza completa, 1 indica il colore completo (nessuna trasparenza).

L'esempio seguente mostra un gradiente lineare che inizia da sinistra. Inizia completamente trasparente, passando al rosso a colori:

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

Visualizza esempio

Ripetizione di un gradiente lineare

La funzione Repeating-Linear-Gradient() viene utilizzata per ripetere i gradienti lineari:

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

Visualizza esempio

Gradienti radiali CSS

Un gradiente radiale è definito dal suo centro.

Per creare un gradiente radiale è necessario definire anche almeno due interruzioni di colore.

Sintassi

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Per impostazione predefinita, la forma è un'ellisse, la dimensione è l'angolo più lontano e la posizione è al centro.

Gradiente radiale: interruzioni di colore equidistanti (impostazione predefinita)

L'esempio seguente mostra una sfumatura radiale con interruzioni di colore equidistanti:

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

Visualizza esempio

Gradiente radiale: interruzioni di colore diversamente spaziate

L'esempio seguente mostra una sfumatura radiale con interruzioni di colore distanziate in modo diverso:

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

Visualizza esempio

Imposta forma

Il parametro forma definisce la forma. Può assumere il valore cerchio o ellisse. Il valore predefinito è l'ellisse.

L'esempio seguente mostra un gradiente radiale con la forma di un cerchio:

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

Visualizza esempio

Utilizzo di parole chiave di dimensioni diverse

Il parametro size definisce la dimensione del gradiente. Può assumere quattro valori:

• closest-side
• farthest-side
• closest-corner
• farthest-corner

Un gradiente radiale con parole chiave di dimensioni diverse:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

Visualizza esempio

Ripetizione di un gradiente radiale

La funzione Repeating-radial-gradient() viene utilizzata per ripetere i gradienti radiali:

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

Visualizza esempio

Gradienti conici CSS

Una sfumatura conica è una sfumatura con transizioni di colore ruotate attorno a un punto centrale.

Per creare un gradiente conico è necessario definire almeno due colori.

Sintassi

background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);

Per impostazione predefinita, l'angolo è 0 gradi e la posizione è il centro.

Se non viene specificato alcun grado, i colori verranno distribuiti equamente attorno al punto centrale.

Gradiente conico: tre colori

L'esempio seguente mostra un gradiente conico con tre colori:

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

Visualizza esempio

Gradiente conico: cinque colori

L'esempio seguente mostra un gradiente conico con cinque colori:

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

Visualizza esempio

Gradiente conico: tre colori e gradi

L'esempio seguente mostra un gradiente conico con tre colori e un grado per ciascun colore:

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}

Crea grafici a torta

Basta aggiungere border-radius: 50% per far sembrare il gradiente conico come una torta:

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

Visualizza esempio

Ecco un altro grafico a torta con gradi definiti per tutti i colori:

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
  border-radius: 50%;
}

Visualizza esempio

Gradiente conico con angolo specificato

[from angle] specifica un angolo di cui viene ruotato l'intero gradiente conico.

L'esempio seguente mostra un gradiente conico con un angolo di 90 gradi:

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

Visualizza esempio

Gradiente conico con posizione centrale specificata

[at position] specifica il centro del gradiente conico.

L'esempio seguente mostra un gradiente conico con una posizione centrale del 60% 45%:

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
}

Visualizza esempio

Ripetizione di un gradiente conico

La funzione repeating-conic-gradient() viene utilizzata per ripetere i gradienti conici:

#grad {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
  border-radius: 50%;
}

Visualizza esempio

Ecco un gradiente conico ripetuto con inizi e interruzioni di colore definiti:

#grad {
  background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
  border-radius: 50%;
}

Visualizza esempio

Funzioni gradiente CSS

Funzione	Descrizione
conic-gradient()	Crea un gradiente conico. Definire almeno due colori (intorno a un punto centrale)
linear-gradient()	Crea un gradiente lineare. Definire almeno due colori (dall'alto verso il basso)
radial-gradient()	Crea un gradiente radiale. Definire almeno due colori (dal centro ai bordi)
repeating-conic-gradient()	Ripete un gradiente conico
repeating-linear-gradient()	Ripete un gradiente lineare
repeating-radial-gradient()	Ripete un gradiente radiale