Lineare, radiale, conico e mesh: tutti i tipi di gradiente spiegati

Esistono quattro tipi di gradienti principali: lineare, radiale, conico e mesh. I gradienti lineari cambiano colore lungo una linea retta, quelli radiali si espandono verso l’esterno da un punto, quelli conici ruotano intorno a un centro come la lancetta di un orologio e quelli mesh fondono diversi punti di colore insieme in due dimensioni. Intorno a loro ci sono alcune varianti utili: i gradienti ripetuti, quelli a forma libera e la grana, che è una texture stesa sopra più che un tipo a sé.

Qui sotto, ogni tipo ha un esempio dal vivo da copiare, una nota su ciò in cui eccelle e un link alla sua guida completa. Se parti da zero, che cos’è un gradiente spiega prima punti di colore, posizioni e spazi colore.

Gradienti lineari

Un gradiente lineare corre lungo una linea retta con un angolo a tua scelta. In CSS la direzione predefinita è dall’alto in basso, 0deg punta verso l’alto e gli angoli girano in senso orario, quindi 90deg va da sinistra a destra e 135deg va dall’angolo in alto a sinistra verso quello in basso a destra. È di gran lunga il tipo più comune, perché è prevedibile, riempie in modo pulito qualsiasi rettangolo e suggerisce una luce che arriva da un lato.

Usa i gradienti lineari per sfondi di pagine e post, pulsanti, banner e tutto ciò che deve ripetersi o scalare in modo prevedibile. La sintassi e i dettagli sono in i gradienti lineari in CSS, e la scelta della direzione è trattata in l’angolo del gradiente.

Gradienti radiali

Un gradiente radiale parte da un punto e si espande verso l’esterno come un cerchio o un’ellisse. Spostare quel punto dal centro è il trucco che lo fa sembrare luce: un bagliore dall’alto a sinistra si legge come una lampada, un sole o un riflesso su una superficie curva. I gradienti radiali sono anche il modo in cui si costruisce la maggior parte delle vignettature morbide e degli effetti a riflettore.

Usa i gradienti radiali per bagliori, riflettori, vignettature, sfere e tutto ciò che deve sembrare illuminato da un punto. Vedi i gradienti radiali per le parole chiave di dimensione come closest-side e farthest-corner.

Gradienti conici

Un gradiente conico cambia colore mentre giri intorno a un punto centrale, invece che allontanandoti da esso. Immagina il movimento della lancetta di un orologio. Per questo è la scelta naturale per ruote dei colori, grafici a torta, anelli di caricamento e riflessi angolari come il metallo spazzolato o il lampo arcobaleno di una lamina olografica.

Usa i gradienti conici per ruote, grafici, riflessi e iridescenze. La guida completa è i gradienti conici, e l’effetto lamina è in i gradienti olografici.

Gradienti ripetuti

Ciascuno dei tre tipi CSS ha una versione ripetuta. Invece di stendere una sola sfumatura su tutta la forma, ripete più volte una sfumatura breve. Con gli stop netti ottieni strisce, anelli e raggiere nitidi senza alcun file immagine.

Gradienti mesh e a forma libera

Un gradiente mesh mette il colore in diversi punti di una superficie e li fonde tutti in due dimensioni. Illustrator chiama la sua versione a punti e griglia «trama sfumata» e quella più libera «sfumatura a forma libera». In ogni caso, il risultato non ha un’unica direzione, ed è per questo che sembra organico, come luce attraverso l’acqua o vernice colata. Il CSS non ha un tipo mesh, ma puoi imitarne uno in modo convincente sovrapponendo gradienti radiali morbidi su un colore di base.

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(at 18% 22%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 82% 18%, #0ea5e9 0px, transparent 50%),
    radial-gradient(at 70% 85%, #f472b6 0px, transparent 55%),
    radial-gradient(at 25% 80%, #14b8a6 0px, transparent 50%);
}

Usa i gradienti mesh per sfondi hero, wallpaper, copertine di album e campi di brand che devono sembrare vivi. Le insidie, soprattutto colori fangosi e banding, sono in i gradienti mesh.

Grana e texture: lo strato sopra

La grana non è un tipo di gradiente, ma cambia la resa di ogni tipo. Un sottile strato di rumore nasconde le strisce che le sfumature morbide possono mostrare sugli schermi, e fa sembrare il colore digitale stampato o cinematografico. Altre materie, come carta, vetro e seta, fanno lo stesso lavoro con una voce diversa. Vedi i gradienti con grana per capire quanta aggiungerne.

Quale tipo di gradiente usare

Se vuoi un campo finito con colore, luce e grana già bilanciati, è esattamente ciò che è un Mark, e puoi creare design con qualsiasi Mark del Mercato gratuitamente.