Come far sembrare bello un gradiente: controllo in sette punti

Sapere come far sembrare bello un gradiente si riduce a sette controlli, da fare in ordine: colori che si incontrano senza diventare grigi, passaggi distribuiti in modo disuguale, luce che viene da una direzione, un fondo che dà l’atmosfera, un tocco di grana, uno spazio calmo per le parole e un’esportazione che lo mantiene liscio. Ognuno è una prova rapida con un rimedio chiaro. Quasi tutti i gradienti che sembrano scadenti ne falliscono almeno due, e correggere quei due di solito fa più che cambiare del tutto i colori.

1. Colori che si incontrano in modo pulito

Quando due colori opposti sulla ruota si miscelano direttamente, il centro cade nel grigio. Da blu ad arancione e da verde a rosa sono i soliti colpevoli. Aggiungi un colore ponte tra loro, così la miscela gira attorno alla ruota invece di attraversarne il centro, oppure miscela in uno spazio colore percettivo. I gradienti sporchi e l’interpolazione dei gradienti spiegano entrambe le cose.

2. Passaggi distribuiti in modo disuguale

I colori equidistanti sembrano una rampa da un preset. In natura di solito un colore domina e il cambiamento avviene su un tratto breve: un cielo è quasi tutto blu con una stretta banda calda all’orizzonte. Dai al colore principale dal 60 al 70 percento dell’inquadratura e lascia arrivare gli altri tardi. I passaggi di colore dei gradienti approfondiscono posizionamento e punti di controllo.

3. Luce da una sola direzione

Un buon gradiente sembra illuminato. Scegli da dove viene la luce, di solito un angolo in alto, e fai di quell’area la più luminosa e satura. Tutto il resto si allontana da lì. Se non riesci a indicare la sorgente di luce, il gradiente sembrerà piatto qualunque colore usi. Un morbido gradiente radiale sovrapposto a uno lineare è il modo più rapido per aggiungerla.

4. Un fondo che dà l’atmosfera

Decidi se il design è scuro o chiaro, e impegnati. Un gradiente che vaga da un viola medio a un rosa medio non ha fondo, quindi sembra indeciso. Una base quasi nera fa brillare i colori; un bianco caldo spento li fa sembrare stampati. Spingi la base oltre ciò che è comodo, poi riportala indietro di un passo.

5. Grana: il giusto rapporto di rumore

I gradienti digitali perfettamente lisci mostrano strisce su molti schermi e sembrano le impostazioni predefinite di un software. Uno strato di rumore fine risolve entrambe le cose. L’intervallo utile è stretto: sotto il 2 percento di opacità non lo vedi, sopra l’8 percento si legge come una texture voluta e non come una finitura. Per i gradienti scuri parti dal 3 percento; per quelli pallidi dal 5 percento, perché il rumore si nota meno sui colori chiari.

.gradient {
  position: relative;
  background: radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%);
}

.gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}

Altre ricette per la grana sono nei gradienti granulosi e nella texture di rumore in CSS.

6. Uno spazio calmo per le parole

La maggior parte dei gradienti esiste per portare un messaggio. Trova dove vanno le parole e assicurati che quell’area sia la più calma e uniforme nel tono, così ogni riga ha lo stesso contrasto. La parte più luminosa e movimentata del gradiente va altrove. Non correggere mai uno scarso contrasto con un glow dietro le lettere: sposta la luce.

Questo è il controllo che fa Gradiently al posto tuo. Un Mark sa dove sono le tue parole: la sua regione più calma si sposta dietro il testo, i colori vicini alle lettere si approfondiscono o si alzano, e l’Inchiostro automatico sceglie testo chiaro o scuro per ogni riga dalla palette del Mark stesso.

7. Un’esportazione che lo mantiene liscio

• Immagini fisse: esporta in PNG. La compressione JPEG trasforma le lunghe dissolvenze in gradini, e le app social comprimono di nuovo al caricamento.
• Video: usa un MP4 ad alto bitrate nella dimensione esatta della piattaforma, così nulla viene riscalato.
• Dimensioni: esporta alle misure della piattaforma, come 1080×1350 per un post Instagram, invece di lasciare che sia l’app a ritagliare.
• Controlla su un telefono: guarda la versione caricata, in una stanza buia, a piena luminosità. È lì che si nasconde il banding.

Se le strisce sopravvivono a tutto questo, il banding dei gradienti ha le correzioni più profonde.