# Gradiente conico in CSS: cerchi, grafici a torta e riflessi

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

conic-gradient() fa girare il colore attorno a un punto come la lancetta di un orologio. Da questa sola idea nascono cerchi cromatici, grafici a torta e ad anello, riflessi metallici e raggiere.

## The short version

- Un gradiente conico CSS dispone i colori attorno a un punto centrale, girando in senso orario dall’alto, invece che lungo una linea o verso l’esterno in anelli.
- I punti di colore di un gradiente conico usano angoli o percentuali di un giro completo, quindi 25% e 90deg indicano la stessa posizione.
- I punti netti trasformano un gradiente conico in spicchi, il modo più rapido di disegnare un grafico a torta in CSS.
- La parola chiave from ruota il punto da cui parte il giro, e at sposta il centro.
- repeating-conic-gradient() ripete i suoi punti attorno al cerchio e, combinato con background-size, disegna scacchiere e raggiere.

Un **gradiente conico in CSS** fa girare il colore attorno a un punto centrale, come una lancetta gira sul suo quadrante. Dove un gradiente lineare cambia lungo una linea e uno radiale cambia allontanandosi dal centro, `conic-gradient()` cambia con l’angolo. Parte dall’alto, procede in senso orario e si usa ovunque il CSS accetti un’immagine. È lo strumento naturale per cerchi cromatici, grafici a torta, anelli di caricamento e i riflessi angolari del metallo spazzolato.

Un semplice cerchio cromatico: `conic-gradient(#ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444)`

Sette punti, distribuiti in modo uniforme su un giro completo. Ripetere il primo colore alla fine chiude la giuntura in alto.

Se stai scegliendo tra tipi di gradiente per un design invece di imparare la sintassi, [tipi di gradienti](https://gradiently.design/it/guide/types-of-gradients) e la guida di design ai [gradienti conici](https://gradiently.design/it/guide/conic-gradient) sono punti di partenza migliori.

## La sintassi di conic-gradient()

```css
/*               start angle   centre        stops */
conic-gradient(from 90deg at 30% 50%, #0ea5e9, #6366f1, #0ea5e9)

/* stops as angles or as percentages of the turn */
conic-gradient(#f59e0b 0deg 90deg, #1e293b 90deg)
conic-gradient(#f59e0b 0% 25%, #1e293b 25%)
```

Tutto ciò che precede la prima virgola è facoltativo. Entrambi gli elenchi di punti nelle ultime due righe disegnano lo stesso quarto di spicchio.

| Parte | Esempio | Predefinito |
| --- | --- | --- |
| Angolo di partenza | `from 45deg` | `from 0deg`, dritto verso l’alto |
| Centro | `at 30% 50%`, `at top left` | `at center` |
| Interpolazione | `in oklch`, `in hsl longer hue` | sRGB per i colori esadecimali |
| Posizione del punto | `90deg`, `0.25turn`, `25%` | distribuiti in modo uniforme sul giro |

Le parti di conic-gradient(). Le posizioni dei punti si misurano lungo il cerchio, non lungo una linea.

Gli angoli procedono in senso orario dall’alto: `90deg` sono le tre, `180deg` le sei. La definizione completa è nella [pagina MDN su conic-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient). Il supporto dei browser è universale da anni in Chrome, Edge, Safari e Firefox attuali, quindi non servono prefissi.

## Ruotare e spostare il giro

`from` ruota l’intero gradiente, utile quando la giuntura tra il primo e l’ultimo colore altrimenti starebbe in alto. `at` sposta il centro. Spostarlo in un angolo trasforma il cerchio in un ventaglio di raggi, e spostarlo del tutto fuori dal riquadro dà una dolce sfumatura inclinata che non somiglia per niente a un cerchio.

- from 0deg, centrato: `conic-gradient(from 0deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- from 180deg: giuntura in basso: `conic-gradient(from 180deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- at 0% 100%: ventaglio dall’angolo: `conic-gradient(at 0% 100%, #1e1b4b, #7c3aed 30deg, #f472b6 60deg, #fde68a 90deg)`

La stessa famiglia di indaco, viola e rosa, ruotata e spostata. Nella versione ad angolo, un quarto di giro riempie il riquadro.

## Grafici a torta e ad anello in CSS

Dai a ogni spicchio un inizio e una fine, e fai partire ciascuno da dove è finito il precedente. Scrivere `0` come seconda posizione del punto è una scorciatoia: una posizione inferiore alla precedente viene riportata a essa, quindi il nuovo colore parte esattamente dove finisce l’ultimo. Arrotonda l’elemento con `border-radius: 50%` e ritaglia un foro con una maschera radiale per trasformare la torta in un anello.

```css
.pie {
  width: 12rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #6366f1 0 40%,   /* 40% */
    #22d3ee 0 65%,   /* 25% */
    #f59e0b 0 85%,   /* 20% */
    #e2e8f0 0        /* the rest, 15% */
  );
}

.donut {
  /* same background as .pie, then a hole */
  mask: radial-gradient(farthest-side, transparent 58%, #000 59%);
}
```

Una torta a quattro spicchi e la riga che la trasforma in un anello. Usa proprietà personalizzate per le percentuali se i dati cambiano.

Spicchi della torta: 40, 25, 20 e 15%: `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #f59e0b 0 85%, #e2e8f0 0)`

Lo sfondo della torta da solo. Su un elemento tondo si legge come un grafico.

> **Anche i grafici hanno bisogno di testo vero** Un gradiente è un’immagine, quindi gli screen reader non possono leggerne i valori. Metti i numeri in un testo o in una tabella accanto al grafico, oppure dai all’elemento `role="img"` e un `aria-label` che li indichi.

I bordi netti nei gradienti conici possono sembrare leggermente frastagliati lungo le linee degli spicchi in alcuni browser. Se ti dà fastidio, lascia una frazione di grado tra i punti, come `#6366f1 0 39.8%, #22d3ee 40.2% 65%`, così il bordo ottiene un filo di sfumatura.

## Cerchi cromatici con interpolazione della tonalità

Un cerchio cromatico di solito richiede sei o sette punti. Con i metodi di interpolazione puoi chiedere al browser di percorrere da solo il cerchio delle tonalità. `longer hue` prende la strada lunga tra due tonalità, e quando entrambi i punti sono lo stesso colore la strada lunga è l’intero cerchio, quindi due rossi danno uno spettro completo.

```css
.wheel {
  border-radius: 50%;
  background: conic-gradient(in hsl longer hue, #ff0000, #ff0000);
}
```

Un colore, due volte, e in mezzo un arcobaleno completo. I [gradienti OKLCH](https://gradiently.design/it/guide/css-gradient-oklch) spiegano tonalità più corta e più lunga.

## Riflessi metallici e luci

Il vero metallo spazzolato e i dischi lucidati catturano la luce in fasce angolari, ed è esattamente ciò che disegna un gradiente conico. Alterna alcuni grigi chiari e scuri, con spaziatura irregolare, e la superficie si legge come metallo. Sovrapposto con bassa opacità a un colore, lo stesso trucco aggiunge un riflesso a pulsanti e schede; vedi i [pulsanti a gradiente](https://gradiently.design/it/guide/css-gradient-button) per un esempio svolto.

- Acciaio spazzolato: `conic-gradient(from 20deg, #9ca3af, #f9fafb 12%, #6b7280 30%, #e5e7eb 48%, #4b5563 62%, #f3f4f6 80%, #9ca3af)`
- Disco d’oro: `conic-gradient(from 200deg, #92400e, #fde68a 15%, #b45309 35%, #fef3c7 55%, #78350f 75%, #92400e)`

Fasce irregolari di luce e ombra disposte attorno al centro si leggono come metallo lucidato.

## Gradienti conici ripetuti per i motivi

`repeating-conic-gradient()` ripete il suo elenco di punti attorno al giro. Punti brevi e netti danno raggiere. In coppia con `background-size`, un motivo a quarti in due colori si ripete in una scacchiera, un motivo altrimenti scomodo da disegnare con i gradienti. Altro nei [motivi CSS](https://gradiently.design/it/guide/css-patterns).

- Raggiera solare: `repeating-conic-gradient(#fbbf24 0 10deg, #f97316 10deg 20deg)`
- Raggi notturni: `repeating-conic-gradient(from 45deg at 50% 50%, #0f172a 0 15deg, #1e293b 15deg 30deg)`

Punti brevi e netti ripetuti fino a chiudere il giro.

```css
.checkerboard {
  background: repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 32px 32px;
}
```

Una scacchiera da 16 pixel: la classica griglia della trasparenza dietro gli editor di immagini.

## FAQ

### Cos’è un gradiente conico in CSS?

È un gradiente i cui colori cambiano con l’angolo attorno a un punto centrale, partendo dall’alto e procedendo in senso orario, scritto con `conic-gradient()`.

### Come creo un grafico a torta con il CSS?

Usa punti netti in un gradiente conico, come `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #e2e8f0 0)`, su un elemento con `border-radius: 50%`. Metti anche i valori in un testo per gli screen reader.

### Come ruoto un gradiente conico?

Aggiungi `from` e un angolo come primo argomento, ad esempio `conic-gradient(from 90deg, ...)`. Il giro parte allora dalle tre invece che dall’alto.

### Perché i bordi del mio gradiente conico sono frastagliati?

I punti netti non hanno sfumatura e alcuni browser disegnano il confine senza attenuarlo. Lasciare una frazione di grado tra punti vicini lo ammorbidisce.

### I gradienti conici funzionano in tutti i browser?

Sì, le versioni attuali di Chrome, Edge, Safari e Firefox supportano `conic-gradient()` e `repeating-conic-gradient()` senza prefissi.