Funzione CSS radial-gradient()

Pagina precedente Funzione pow() CSS
Pagina successiva Funzione ray() CSS
Torna al livello superiore Manuale di riferimento delle funzioni CSS

Definizione e uso

CSS radial-gradient() La funzione imposta la progressione radiale come immagine di sfondo.

La progressione radiale è definita dal suo centro.

Per creare una progressione radiale, è necessario definire almeno due colori di riferimento.

Esempio di progressione radiale:

Esempio

Esempio 1

Distribuzione uniforme di colori per la progressione radiale:

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

Prova tu stesso

Esempio 2

Distribuzione diversa di colori per la progressione radiale:

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

Prova tu stesso

Esempio 3

Gradiente radiale di forma circolare:

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

Prova tu stesso

Esempio 4

Gradiente radiale con parole chiave di diverse dimensioni:

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

Prova tu stesso

Sintassi CSS

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

Valore	Descrizione
shape	Definire la forma del gradiente. Valori possibili: ellipse (predefinito) circle
size	Definire la dimensione del gradiente. Valori possibili: farthest-corner (predefinito) closest-side closest-corner farthest-side
position	Definire la posizione del gradiente. Il valore predefinito è "center".
start-color, ... , last-color	I colori di riferimento sono i colori che si desidera presentare con una transizione morbida tra di loro. Questo valore è composto da un valore di colore seguito da una o due posizioni opzionali dei colori di riferimento (percentuale tra 0% e 100% o lunghezza lungo l'asse della progressione).