Gradienti radiali CSS
Gradienti radiali CSS
Un gradiente radiale è definito dal suo centro.
Per creare una sfumatura radiale devi anche definire 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.
Sfumatura radiale - Interruzioni colore uniformemente distanziate (impostazione predefinita)
L'esempio seguente mostra una sfumatura radiale con interruzioni di colore equidistanti:
Esempio
#grad {
background-image: radial-gradient(red, yellow, green);
}
Gradiente radiale - Interruzioni di colore a spaziatura diversa
L'esempio seguente mostra una sfumatura radiale con interruzioni di colore distanziate in modo diverso:
Esempio
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
Imposta la forma
Il parametro forma definisce la forma. Può assumere il valore cerchio o ellisse. Il valore predefinito è ellisse.
L'esempio seguente mostra un gradiente radiale con la forma di un cerchio:
Esempio
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
Uso di parole chiave di dimensioni diverse
Il parametro size definisce la dimensione del gradiente. Può assumere quattro valori:
- lato più vicino
- lato più lontano
- l'angolo più vicino
- l'angolo più lontano
Esempio
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);
}
Ripetendo un gradiente radiale
La funzione repeating-radial-gradient() viene utilizzata per ripetere i gradienti radiali:
Esempio
Un gradiente radiale ripetuto:
#grad {
background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);
}