# Come far sembrare bello un gradiente: controllo in sette punti

[Canonical HTML page](https://gradiently.design/it/guide/gradient-noise-ratio)

La maggior parte dei gradienti brutti fallisce le stesse poche prove. Fai passare qualsiasi miscela da questi sette controlli, in ordine, e saprai esattamente che cosa cambiare prima che la veda qualcun altro.

## The short version

- Un gradiente è bello quando i suoi colori si incontrano senza diventare grigi, i suoi passaggi sono distanziati in modo disuguale e la sua luce sembra venire da un punto solo.
- I centri grigi o sporchi nascono quando due colori opposti si miscelano direttamente; un colore ponte o la miscela in OKLCH li risolve.
- Una piccola quantità di grana, attorno al 2-6 percento di opacità, nasconde il banding e fa sembrare un gradiente digitale una superficie.
- Un buon gradiente lascia sempre un’area calma dove le parole possono stare con forte contrasto.
- Esporta i gradienti in PNG o in video di alta qualità e non in JPEG compresso, che crea strisce visibili.

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.

| Controllo | La prova | Se fallisce |
| --- | --- | --- |
| 1. Centro pulito | Il punto medio è grigio o marrone? | Aggiungi un colore ponte o miscela in OKLCH |
| 2. Passaggi disuguali | Ogni colore ha la stessa larghezza? | Dai a un colore la maggior parte dello spazio |
| 3. Una luce | Sai dire dove sta la luce? | Illumina un lato o un angolo |
| 4. Un fondo | È chiaramente scuro o chiaramente chiaro? | Spingi la base più scura o più pallida |
| 5. Grana | Vedi delle strisce? | Aggiungi dal 2 al 6 percento di rumore |
| 6. Spazio per le parole | Il testo si legge ovunque? | Calma l’area dietro di lui |
| 7. Esportazione | Sopravvive al caricamento? | PNG per le immagini fisse, bitrate alto per il video |

L’intero controllo su una pagina. Fallo dall’alto in basso; le correzioni successive dipendono dalle precedenti.

## 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](https://gradiently.design/it/guide/muddy-gradients) e l’[interpolazione dei gradienti](https://gradiently.design/it/guide/gradient-interpolation) spiegano entrambe le cose.

- Fallisce: centro grigio: `linear-gradient(90deg, #2563eb 0%, #f97316 100%)`
- Passa: ponte magenta: `linear-gradient(90deg, #2563eb 0%, #c026d3 50%, #f97316 100%)`
- Passa: miscelato in OKLCH: `linear-gradient(90deg in oklch, #2563eb 0%, #f97316 100%)`

Gli stessi due colori in tre modi. Un ponte o una miscela percettiva tiene vivo il centro.

## 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](https://gradiently.design/it/guide/gradient-stops) approfondiscono posizionamento e punti di controllo.

- Terzi uguali: `linear-gradient(180deg, #1e3a8a 0%, #7c3aed 50%, #f472b6 100%)`
- Pesato verso l’alto: `linear-gradient(180deg, #1e3a8a 0%, #312e81 55%, #7c3aed 82%, #f472b6 100%)`

Stessi tre colori. La versione pesata ha un’atmosfera; quella uniforme ha una formula.

## 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](https://gradiently.design/it/guide/radial-gradient) 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.

- Nessun fondo: `linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)`
- Fondo scuro, angolo illuminato: `radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%)`
- Fondo chiaro, angolo illuminato: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #f5e8ff 40%, #faf7f2 80%)`

I controlli 3 e 4 insieme. Un fondo chiaro e una luce trasformano un preset in una scena.

## 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.

```css
.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;
}
```

Uno strato di rumore SVG ripetuto al 4 percento. Alza o abbassa l’opacità a piccoli passi guardando l’area più scura.

Altre ricette per la grana sono nei [gradienti granulosi](https://gradiently.design/it/guide/grainy-gradients) e nella [texture di rumore in CSS](https://gradiently.design/it/guide/css-noise-texture).

## 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.

Un post di saldi in cui parte del titolo sta su una macchia luminosa del gradiente e perde contrasto

Fallisce il controllo 6: il colore attraversa dritto le parole.

Lo stesso post di saldi con un’area più calma e uniforme dietro il titolo, così tutte le parole si leggono chiaramente

Passa: l’area dietro il testo è più calma e ogni riga si legge.

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](https://gradiently.design/it/guide/gradient-banding) ha le correzioni più profonde.

## FAQ

### Come faccio a far sembrare bello un gradiente?

Usa colori che si miscelano senza diventare grigi, distribuisci i passaggi in modo disuguale, illuminalo da una direzione, scegli un fondo scuro o chiaro, aggiungi un po’ di grana e lascia uno spazio calmo per le parole.

### Quanto rumore devo aggiungere a un gradiente?

Di solito dal 2 al 6 percento di opacità. Parti dal 3 percento sui gradienti scuri e dal 5 percento su quelli pallidi, e fermati appena le strisce spariscono.

### Perché il mio gradiente sembra sporco?

Due colori opposti si stanno miscelando attraverso il grigio. Aggiungi un colore ponte tra loro o miscela in OKLCH.

### Perché il mio gradiente sembra scadente?

Probabilmente sono due colori, equidistanti, con un angolo di 45 gradi e senza grana. Sono le impostazioni predefinite della maggior parte degli strumenti, quindi sembrano poco ponderate.

### Qual è il miglior formato di file per i gradienti?

PNG per le immagini fisse e MP4 ad alto bitrate per il video. Il JPEG compresso mostra banding nelle dissolvenze lunghe e lisce.