Gradienti sottili: variazioni di colore discrete per interfacce pulite

Un gradiente sottile passa tra due colori così vicini che la differenza si sente più di quanto si veda: dal bianco a un bianco sporco freddo, dal quasi nero a un quasi nero appena più morbido. Quella piccola variazione fa sembrare illuminata una superficie, ed è per questo che le interfacce pulite li usano su sfondi di pagina, card e pannelli in modalità scura. I codici qui sotto tengono la differenza di luminosità entro pochi punti percentuali; oltre, il gradiente comincia a diventare un elemento in vista invece di una superficie.

Codici di gradienti sottili chiari

Ognuno parte vicino al bianco e scivola verso una tinta appena accennata. Scegli la tinta dal colore del tuo brand, così anche lo sfondo porta una traccia di identità. Le sfumature dall’alto verso il basso sono le più naturali, perché la luce di solito arriva dall’alto.

Codici di gradienti sottili scuri

Le superfici scure ne traggono ancora più vantaggio, perché il nero piatto e puro sembra un buco nello schermo. Alza un po’ la parte alta e lascia che quella bassa si assesti. I gradienti per la modalità scura trattano temi interi; questi sono i mattoni di base.

Dove funzionano i gradienti sottili in un’interfaccia

La regola pratica: un gradiente sottile non dovrebbe mai essere ciò che si guarda. Se chi rivede il lavoro commenta il gradiente, è troppo forte per uno sfondo. Per look ancora più sobri, a stampa e sui social oltre che su schermo, vedi gli sfondi minimalisti.

Come tingere un gradiente sottile con il colore del tuo brand

Un gradiente grigio neutro è sicuro ma anonimo. Tingere l’estremo più chiaro o più scuro con una traccia della tonalità del brand fa sentire tutta l’interfaccia imparentata con il logo, senza che nessuno sappia dire perché. Il trucco è tenere la tonalità e buttare via quasi tutta la saturazione.

1. 1

   Prendi la tonalità del brand

   Converti il colore principale del brand in oklch o HSL e annota solo la tonalità: circa 265 per un viola, 160 per un verde, 30 per un arancione caldo.

2. 2

   Tienilo quasi grigio

   Imposta una croma molto bassa, intorno a 0,005 e 0,015 in oklch, oppure una saturazione sotto il 30% circa in HSL con luminosità altissima. Vuoi un soffio di colore, non un pastello.

3. 3

   Imposta due valori di luminosità

   Per i temi chiari prova 99% e 96%; per quelli scuri circa 20% e 15%. Tieni entrambi gli estremi sulla stessa tonalità, così la sfumatura non scivola verso il grigio o verso un secondo colore.

4. 4

   Controllalo accanto a bianco o nero puro

   Metti il gradiente accanto a un blocco bianco o nero semplice. Se non vedi alcuna differenza, sposta un po’ l’estremo inferiore; se la tinta si nota da lontano, abbassa la croma.

La stessa tinta può poi passare a bordi, divisori e stati di hover, così il gradiente diventa un elemento di un sistema quieto e non un effetto isolato. I pulsanti sono l’unico posto in cui concedere una variazione un po’ più forte, qualche punto percentuale più scuro in basso, perché un accenno di volume li fa sembrare premibili.

Scrivere un gradiente sottile in CSS

I codici esadecimali funzionano ovunque. Per un controllo più fine, scrivi i colori in oklch, dove il primo numero è la luminosità percepita, così puoi impostare la variazione con precisione: da 99% a 96%, per esempio. Miscelare in oklch mantiene anche uniforme il cambiamento lungo tutta la lunghezza. CSS gradient oklch spiega la sintassi, e CSS linear gradient copre le basi.

:root {
  --surface: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  :root {
    /* lightness 99% to 96.5%, the same faint cool tint */
    --surface: linear-gradient(180deg in oklch, oklch(99% 0.003 250) 0%, oklch(96.5% 0.006 250) 100%);
  }
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--surface);
  background-attachment: fixed;
}

Perché i gradienti sottili mostrano il banding, e il rimedio

Due colori vicini hanno pochissimi passaggi in un’immagine a 8 bit. Stirali su un hero di 1920 pixel e ogni passaggio diventa una striscia visibile, soprattutto nei gradienti scuri e sugli schermi più economici. La spiegazione completa è nel banding dei gradienti.

Sul web, una minuscola texture di rumore SVG stesa sul gradiente a bassa opacità elimina i passaggi visibili senza che nessuno noti la grana; la texture di rumore in CSS ha il codice. Per post social e slide, un Mark di Gradiently porta con sé la sua grana e si rende a ogni dimensione, così uno sfondo quieto resta liscio sia in una storia sia in un banner. Quando vuoi l’opposto della quiete, i gradienti vivaci offrono i codici saturi.