# Gradienti conici: cerchi cromatici, grafici e riflessi

[Canonical HTML page](https://gradiently.design/it/guide/conic-gradient)

I gradienti lineari viaggiano, quelli radiali si espandono e quelli conici girano. Questa sola differenza li rende lo strumento giusto per cerchi cromatici, grafici, metallo e fasci di luce.

## The short version

- Un gradiente conico cambia colore mentre ruota attorno a un centro, quindi i suoi punti sono angoli e non distanze.
- I gradienti conici sono il modo naturale di disegnare cerchi cromatici, grafici a torta e ad anello, riflessi metallici e fasci di luce.
- Gli strumenti di design spesso chiamano la stessa cosa gradiente angolare.
- Ogni gradiente conico ha un punto netto al centro e una giuntura dove il cerchio si chiude, e vanno gestiti entrambi.
- Un gradiente conico con punti netti diventa un grafico, e con punti morbidi diventa una superficie che sembra catturare la luce.

Un **gradiente conico** cambia colore mentre gira attorno a un centro, come la lancetta di un orologio si muove sul suo quadrante. Un gradiente lineare cambia lungo una linea e uno radiale cambia allontanandosi dal centro, ma uno conico cambia con l’angolo. Guardando dall’alto un cono dipinto a fasce vedresti la stessa cosa, ed è da qui che nasce il nome. Figma e altri strumenti lo chiamano **gradiente angolare**.

Questo comportamento basato sull’angolo rende i gradienti conici bravi in cose che gli altri gradienti non sanno fare: cerchi cromatici, grafici a torta, metallo spazzolato, raggiere e fasci di luce. Questa guida tratta ciascuno con esempi dal vivo. La sintassi CSS completa è in [CSS conic-gradient()](https://gradiently.design/it/guide/css-conic-gradient).

## Come funziona un gradiente conico

Imposti un centro, un angolo di partenza e un elenco di colori con angoli o percentuali. Zero gradi punta verso l’alto e il giro procede in senso orario. Dove un colore finisce e comincia il successivo c’è un punto, esattamente come negli altri gradienti, solo che il 25% significa un quarto di giro, non un quarto della larghezza.

Cerchio cromatico: `conic-gradient(from 0deg at 50% 50%, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444)`

Un cerchio completo di tonalità. L’ultimo colore ripete il primo, così il cerchio si chiude senza giuntura.

Quella ripetizione del primo colore alla fine conta. Se l’ultimo punto è diverso dal primo, compare una linea netta dritta sopra il centro, dove il giro incontra il proprio inizio. La guida al [cerchio cromatico](https://gradiently.design/it/guide/color-wheel) spiega come leggere le tonalità di un cerchio come questo.

## Esempi di gradienti conici per il design

- Punti netti: spicchi di grafico: `conic-gradient(#7c3aed 0% 45%, #f472b6 45% 75%, #fcd34d 75% 100%)`
- Riflesso di metallo spazzolato: `conic-gradient(from 45deg at 50% 50%, #d4d4d8, #71717a, #f4f4f5, #52525b, #e4e4e7, #71717a, #d4d4d8)`
- Fascio di luce: `conic-gradient(from 160deg at 50% -10%, #0b0b14 0deg, #fde68a 20deg, #0b0b14 40deg)`
- Raggiera: `repeating-conic-gradient(from 0deg at 50% 50%, #f97316 0deg 10deg, #fdba74 10deg 20deg)`
- Pastello iridescente: `conic-gradient(from 200deg at 60% 45%, #fbcfe8, #c7d2fe, #a5f3fc, #d9f99d, #fde68a, #fbcfe8)`
- Giro dall’angolo: `conic-gradient(from 0deg at 0% 100%, #0f172a 0deg, #1d4ed8 45deg, #67e8f9 90deg)`

Sei gradienti conici. I punti netti fanno grafici e raggiere; quelli morbidi fanno superfici e luce.

### Grafici a torta e ad anello

Dai a ogni colore un angolo di inizio e uno di fine e il gradiente diventa un grafico a torta, senza immagini e senza librerie per i grafici. Aggiungi una maschera circolare e diventa un anello. Va bene per dati semplici e decorativi in post e slide. Per un resoconto serio, aggiungi delle etichette, perché un grafico che si affida solo al colore esclude chi vede i colori in modo diverso.

```css
.donut {
  width: 160px;
  aspect-ratio: 1;
  border-radius: 50%;
  /* 45%, 30% and 25% of the circle */
  background: conic-gradient(#7c3aed 0% 45%, #f472b6 45% 75%, #fcd34d 75% 100%);
  /* cut out the middle */
  mask: radial-gradient(circle, transparent 55%, #000 56%);
}
```

Un grafico ad anello in un solo elemento. Cambia le percentuali per cambiare gli spicchi.

### Metallo e riflessi

Acciaio spazzolato, un disco in vinile e un pulsante satinato riflettono la luce a spicchi attorno al loro centro. Alternare grigi chiari e scuri in un gradiente conico lo imita. Usa da quattro a sei alternanze; meno sembra un pallone da spiaggia, più sembra un grafico. Vira i grigi leggermente al caldo per oro o ottone e leggermente al blu per il cromo.

### Fasci e raggiere

Metti il centro sopra o fuori dall’inquadratura e uno spicchio luminoso e stretto diventa il fascio di un faro o un raggio di luce da una finestra. Un gradiente conico ripetuto con spicchi alternati diventa una raggiera, l’espediente retrò dei manifesti dei saldi. Tienile dietro un titolo grande e semplice; da sole sono rumorose.

### Iridescenza

La vera iridescenza cambia tonalità con l’angolo di osservazione. Un morbido giro conico di pastelli, con il centro spostato di lato, ci arriva sorprendentemente vicino. È la base della maggior parte dei [gradienti olografici](https://gradiently.design/it/guide/holographic-gradients).

## Conico, radiale o lineare

| Tipo | Il colore cambia con | Ideale per |
| --- | --- | --- |
| Lineare | La distanza lungo una linea | Cieli, luce da un lato, semplici sfondi di brand |
| Radiale | La distanza da un centro | Fari, bagliori, vignettature |
| Conico | L’angolo attorno a un centro | Cerchi, grafici, riflessi, fasci, raggiere |

Ogni tipo risponde a una domanda diversa su dove cambia il colore.

Se hai dubbi, chiediti cosa sta facendo la luce nella tua immagine. La luce che cade su una superficie è lineare. La luce che viene da una sorgente è [radiale](https://gradiently.design/it/guide/radial-gradient). La luce che si riflette su qualcosa che gira o è curvo è conica. [Tipi di gradienti](https://gradiently.design/it/guide/types-of-gradients) li mostra tutti affiancati.

## Usare bene i gradienti conici

1. **Decidi dove va il centro** Un gradiente conico centrato sembra un grafico o un cerchio. Spostare il centro in un angolo o fuori dall’inquadratura lo trasforma in luce e riflesso.
2. **Chiudi il cerchio** Ripeti il primo colore alla fine, a meno che tu non voglia una giuntura visibile. Le giunture nette sono solo per grafici e raggiere.
3. **Nascondi o ammorbidisci il punto** Ogni gradiente conico si stringe in un punto netto al centro. Mettici sopra un logo, un cerchio o il bordo dell’inquadratura, oppure sfoca il livello.
4. **Usa un angolo di partenza** Ruotare l’inizio con `from` sposta il punto in cui cade lo spicchio più luminoso, e spesso è tutto ciò che serve a una composizione.
5. **Combina con altri tipi** Un sottile riflesso conico su una base lineare o radiale aggiunge un senso di materiale senza attirare l’attenzione su di sé.

### Da evitare

- Un cerchio arcobaleno come sfondo dietro il testo
- Un punto centrale netto in bella vista
- Una giuntura in cui l’ultimo colore non corrisponde al primo
- Grafici in cui il colore è l’unico modo per distinguere gli spicchi

### Da fare

- Archi di colore brevi e affini per le superfici
- Il centro nascosto dietro un oggetto o fuori dalla tela
- Il primo colore ripetuto alla fine
- Etichette o motivi accanto ai colori dei grafici

I gradienti conici creano anche motivi: una versione ripetuta con quattro quarti netti disegna una scacchiera in una sola riga. I [motivi CSS](https://gradiently.design/it/guide/css-patterns) li trattano.

## FAQ

### Cos’è un gradiente conico?

Un gradiente conico cambia colore mentre ruota attorno a un centro, quindi i suoi punti di colore sono definiti dall’angolo e non dalla distanza.

### Un gradiente conico è uguale a un gradiente angolare?

Sì. Figma e diversi altri strumenti di design lo chiamano gradiente angolare; il CSS lo chiama gradiente conico.

### Come creo un grafico a torta con un gradiente conico?

Dai a ogni colore una posizione di inizio e una di fine con punti netti, ad esempio viola da 0% a 45% e rosa da 45% a 75%. Aggiungi etichette perché il grafico non dipenda solo dal colore.

### Perché c’è una linea in cima al mio gradiente conico?

Il giro inizia e finisce allo stesso angolo. Se l’ultimo colore è diverso dal primo, lì compare una giuntura; ripeti il primo colore alla fine per eliminarla.