Gradienti conici CSS
Gradienti conici CSS
Una sfumatura conica è una sfumatura con transizioni di colore ruotate attorno a un punto centrale.
Per creare un gradiente conico devi 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 è centrale.
Se non viene specificato alcun grado , i colori verranno distribuiti uniformemente attorno al punto centrale.
Gradiente conico: tre colori
L'esempio seguente mostra un gradiente conico con tre colori:
Esempio
Un gradiente conico con tre colori:
#grad {
background-image: conic-gradient(red, yellow, green);
}
Gradiente conico: cinque colori
L'esempio seguente mostra un gradiente conico con cinque colori:
Esempio
Un gradiente conico con cinque colori:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
Gradiente conico: tre colori e gradi
L'esempio seguente mostra un gradiente conico con tre colori e un grado per ogni colore:
Esempio
Un gradiente conico con tre colori e un grado per ogni colore:
#grad {
background-image: conic-gradient(red 45deg, yellow
90deg, green 210deg);
}
Crea grafici a torta
Basta aggiungere border-radius: 50%
per rendere il gradiente conico simile a una torta:
Esempio
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
Ecco un altro grafico a torta con gradi definiti per tutti i colori:
Esempio
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
Gradiente conico con specificato dall'angolo
[from angle ] specifica un angolo di cui ruota l'intero gradiente conico.
L'esempio seguente mostra un gradiente conico con un angolo da 90 gradi:
Esempio
Un gradiente conico con a dall'angolo:
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
}
Gradiente conico con posizione centrale specificata
La [at position ] specifica il centro del gradiente conico.
L'esempio seguente mostra un gradiente conico con una posizione centrale del 60% 45%:
Esempio
Un gradiente conico con una posizione centrale specificata:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
}
Ripetizione di un gradiente conico
La repeating-conic-gradient()
funzione viene utilizzata per ripetere i gradienti conici:
Esempio
Un gradiente conico ripetuto:
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
Ecco un gradiente conico ripetuto con inizio e fine colore definiti:
Esempio
Un gradiente conico ripetuto con inizio e fine colore definiti:
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
Funzioni di gradiente CSS
La tabella seguente elenca le funzioni del gradiente CSS:
Function | Description |
---|---|
conic-gradient() | Creates a conic gradient. Define at least two colors (around a center point) |
linear-gradient() | Creates a linear gradient. Define at least two colors (top to bottom) |
radial-gradient() | Creates a radial gradient. Define at least two colors (center to edges) |
repeating-conic-gradient() | Repeats a conic gradient |
repeating-linear-gradient() | Repeats a linear gradient |
repeating-radial-gradient() | Repeats a radial gradient |