Funzione CSS conic-gradient()

Definizione e uso

CSS conic-gradient(); La funzione imposta la dissolvenza conica come immagine di sfondo.

La dissolvenza conica è una dissolvenza di transizione di colore che ruota attorno al punto centrale (simile alla torta e al cerchio delle frecce).

Per creare una dissolvenza conica, è necessario definire almeno due punti di arresto dei colori.

C'è una dissolvenza conica di tre colori:

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

C'è una dissolvenza conica di cinque colori:

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

C'è una dissolvenza conica di tre colori e per ogni colore è specificato un angolo:

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

Aggiungendo border-radius: 50% la dissolvenza conica sembra una torta:

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

Divergenza conica con angolo di partenza:

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

Divergenza conica con posizione centrale:

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

Divergenza conica con angolo di partenza e posizione centrale:

#grad {
  background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

Un altro esempio di grafico a torta:

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

background-image: conic-gradient([from Angle] Position,] degree of color, degree of color, ... );

Valore	Descrizione
from Angle	Opzionale. L'intera divergenza conica ruoterà di questo angolo. Il valore predefinito è 0deg.
at Position	Opzionale. Specifica la posizione centrale della divergenza conica. Il valore predefinito è center.
degree of color, ... , degree of color	Punto di fermata del colore Questo valore è composto dal valore del colore e da una posizione di fermata opzionale (angolo tra 0 e 360 gradi o percentuale tra 0% e 100%).

Valore

Descrizione

from Angle

Opzionale. L'intera divergenza conica ruoterà di questo angolo. Il valore predefinito è 0deg.

at Position

Opzionale. Specifica la posizione centrale della divergenza conica. Il valore predefinito è center.

degree of color, ... , degree of color

Punto di fermata del colore

Questo valore è composto dal valore del colore e da una posizione di fermata opzionale (angolo tra 0 e 360 gradi o percentuale tra 0% e 100%).