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

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.

Se stai scegliendo tra tipi di gradiente per un design invece di imparare la sintassi, tipi di gradienti e la guida di design ai gradienti conici sono punti di partenza migliori.

La sintassi di conic-gradient()

/*               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%)

Gli angoli procedono in senso orario dall’alto: 90deg sono le tre, 180deg le sei. La definizione completa è nella pagina MDN su 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.

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.

.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%);
}

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.

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

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 per un esempio svolto.

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.

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