Gradienti conici: cerchi cromatici, grafici e riflessi

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().

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.

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 spiega come leggere le tonalità di un cerchio come questo.

Esempi di gradienti conici per il design

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.

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

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.

Conico, radiale o lineare

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. La luce che si riflette su qualcosa che gira o è curvo è conica. Tipi di gradienti li mostra tutti affiancati.

Usare bene i gradienti conici

1. 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. 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. 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. 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. 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é.

I gradienti conici creano anche motivi: una versione ripetuta con quattro quarti netti disegna una scacchiera in una sola riga. I motivi CSS li trattano.