# Nove errori nei gradienti che fanno sembrare economico un lavoro

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

La maggior parte dei gradienti che sembrano economici sbaglia in uno di nove modi prevedibili. Ecco ogni errore, cosa lo causa e la modifica precisa che lo risolve.

## The short version

- La maggior parte degli errori nei gradienti nasce da poche cause: colori che passano per il grigio, troppi arresti, banding visibile, contrasto debole del testo e preset lasciati intatti.
- Un gradiente tra due tinte opposte in sRGB spesso diventa grigio al centro, e si corregge con un arresto intermedio o con l’interpolazione in OKLCH.
- Il banding si vede come strisce nei gradienti lenti, scuri o sottili, e di solito uno strato leggero di grana o dither lo nasconde.
- Il testo su un gradiente richiede un contrasto verificato nel punto peggiore, non in quello migliore, perché lo sfondo cambia sotto ogni lettera.
- Un gradiente sembra costoso quando ha una struttura chiara, da tre a cinque colori affini, una texture coerente e un motivo per esistere.

I più comuni **errori nel design dei gradienti** sono centri grigi e fangosi, troppi colori, banding visibile, testo che sparisce, arresti duri, eccesso di arcobaleno, grana incoerente, preset lasciati intatti e un aspetto identico a quello di tutti gli altri. Ognuno ha una causa precisa e una correzione precisa. Nessuno richiede un nuovo strumento, solo uno sguardo più attento a ciò che la sfumatura fa tra i suoi arresti.

Questa guida affronta i nove errori nell’ordine in cui di solito li incontri, dalla matematica del colore fino all’identità. Se vuoi prima le basi, leggi [cos’è un gradiente](https://gradiently.design/it/guide/what-is-a-gradient).

## Errore 1: un centro grigio e fangoso

Sfuma due colori da lati opposti della ruota dei colori, come blu e arancione, e il punto di mezzo in sRGB è un grigio-marrone spento. Il browser fa la media dei canali rosso, verde e blu, e la media di due complementari è vicina al neutro. Il risultato sembra una sbavatura tra due bei colori.

- Prima: dal blu all’ambra in linea retta: `linear-gradient(90deg, #2563eb 0%, #f59e0b 100%)`
- Dopo: con un punto intermedio magenta: `linear-gradient(90deg, #2563eb 0%, #db2777 50%, #f59e0b 100%)`
- Dopo: interpolato in OKLCH: `linear-gradient(in oklch 90deg, #2563eb 0%, #f59e0b 100%)`

Stesse due estremità, tre risultati. Un arresto intermedio o l’interpolazione in OKLCH mantiene saturo il centro.

Lo risolvi facendo passare la sfumatura per un colore che sta tra i due sulla ruota, oppure interpolando in uno spazio percettivo. I [gradienti fangosi](https://gradiently.design/it/guide/muddy-gradients) trattano entrambi i metodi, e [OKLCH in CSS](https://gradiently.design/it/guide/css-gradient-oklch) spiega la sintassi.

## Errore 2: troppi colori

Ogni colore che aggiungi è un’altra transizione che l’occhio deve leggere. Oltre quattro o cinque arresti, un gradiente non sembra più luce che cade su una superficie e comincia a sembrare un grafico a strisce. Diventa anche impossibile da riprodurre allo stesso modo due volte.

- Sette arresti: caotico: `linear-gradient(135deg, #ef4444 0%, #f97316 16%, #eab308 32%, #22c55e 48%, #06b6d4 64%, #6366f1 80%, #d946ef 100%)`
- Tre arresti affini: calmo: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 55%, #f0abfc 100%)`

Tre colori affini danno più profondità di sette senza relazione.

Scegli una famiglia di tinte, aggiungi una parente più chiara e una più scura, poi ammetti al massimo un accento. L’approccio dei [colori analoghi](https://gradiently.design/it/guide/analogous-colors) è il punto di partenza più sicuro.

## Errore 3: strisce di banding

Il banding è la scaletta di gradini visibili che vedi in un gradiente lento, soprattutto scuro. Un canale a 8 bit ha 256 livelli, e quando una sfumatura percorre poca distanza di colore su un’area ampia, ogni livello diventa una fascia larga diversi pixel. Una forte compressione JPEG la peggiora.

```css
.hero {
  position: relative;
  background: linear-gradient(160deg, #0b1020 0%, #1e1b4b 60%, #312e81 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Uno strato di rumore fine con circa l’8% di opacità spezza le fasce senza sembrare sporco.

La grana funziona perché sparpaglia i pixel tra livelli vicini, così il bordo tra due fasce sparisce. Esporta in PNG o in JPEG di alta qualità. Il [banding nei gradienti](https://gradiently.design/it/guide/gradient-banding) illustra in dettaglio le impostazioni di esportazione.

## Errore 4: testo che sparisce sul gradiente

Un gradiente cambia sotto ogni lettera. Il testo bianco può leggersi benissimo all’estremità scura di una sfumatura e svanire all’estremità chiara della stessa riga. Chi progetta controlla il titolo dove sta meglio, e chi legge lo incontra dove sta peggio.

Un post verticale con un titolo posato direttamente su un gradiente vivace, con alcune lettere che perdono contrasto

Lo sfondo passa dritto attraverso le parole, quindi alcune lettere stanno su un colore acceso.

Lo stesso post verticale con il gradiente che si posa in un’area calma e più scura dietro il titolo

Lo stesso design con la parte calma del campo spostata dietro il testo.

Controlla il contrasto nel punto più chiaro dietro il testo chiaro, o nel più scuro dietro il testo scuro. Le WCAG chiedono 4,5:1 per il testo del corpo e 3:1 per il testo grande; il [contrasto dei colori](https://gradiently.design/it/guide/color-contrast-accessibility) spiega i numeri e il [testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient) tratta il posizionamento.

## Errore 5: arresti duri e accidentali

Quando due arresti stanno a pochi punti percentuali di distanza, la sfumatura scatta da un colore all’altro e traccia una linea che nessuno ha chiesto. Gli arresti duri sono utili se voluti, per strisce e grafici, ma una giunzione accidentale sembra un errore.

- Arresti a 8%: giunzione visibile: `linear-gradient(180deg, #0f172a 0%, #0f172a 46%, #7c3aed 54%, #c4b5fd 100%)`
- Arresti distribuiti: luce morbida: `linear-gradient(180deg, #0f172a 0%, #3b1f7a 45%, #7c3aed 75%, #c4b5fd 100%)`

Lascia che ogni transizione occupi uno spazio vero nel campo.

## Errore 6: eccesso di arcobaleno

Uno spettro completo è la cosa più rumorosa che un gradiente possa fare, e raramente dice qualcosa del brand che lo usa. Porta con sé anche le associazioni di ogni tinta insieme. Se vuoi un arcobaleno, usane un arco breve e controlla la luminosità. I [gradienti arcobaleno](https://gradiently.design/it/guide/rainbow-gradient) mostrano versioni di buon gusto.

## Errore 7: grana che non corrisponde

### Evita

- Grana grossa sul post, fine sulla storia, assente sulle slide
- Grana applicata sopra testo e loghi
- Grana così pesante da sembrare un obiettivo sporco
- Ingrandire una texture di grana finché ogni granello diventa una macchia

### Fai

- Una sola dimensione e intensità di grana per ogni formato
- Grana solo sul livello dello sfondo
- Quanto basta per spezzare il banding e dare tessitura
- Grana generata alla dimensione di esportazione, non stirata

La texture fa parte di uno stile, quindi una grana incoerente fa sembrare un insieme di design proveniente da tre posti diversi. I [gradienti con grana](https://gradiently.design/it/guide/grainy-gradients) spiegano quanta usarne.

## Errore 8: consegnare il preset così com’è

La maggior parte degli strumenti offre le stesse sfumature a due colori a 135 gradi. Stanno bene, ed è per questo che sono ovunque. Un preset è un punto di partenza: cambia un colore, aggiungi un terzo arresto, modifica la direzione per adattarla al layout e aggiungi un materiale. [Usare un generatore di gradienti](https://gradiently.design/it/guide/gradient-generator) ti guida in queste modifiche.

## Errore 9: somigliare a tutti gli altri

L’ultimo errore è il più costoso. Un gradiente ben fatto ma identico nello spirito a quello di ogni concorrente non contribuisce alla riconoscibilità. La correzione è la coerenza più qualcosa di difficile da copiare, come un materiale, un modo di muoversi o un modo di fare spazio alle parole. Il [branding con i gradienti](https://gradiently.design/it/guide/gradient-branding) spiega come farne uno tuo.

| Errore | Correzione rapida |
| --- | --- |
| Centro grigio | Arresto intermedio o interpolazione in OKLCH |
| Troppi colori | Una famiglia di tinte più un accento |
| Banding | Grana fine, esportazione in PNG o ad alta qualità |
| Testo illeggibile | Verifica il contrasto nel punto peggiore |
| Arresti duri | Distanzia gli arresti, salvo bordo voluto |
| Eccesso di arcobaleno | Usa un arco breve dello spettro |
| Grana incoerente | Una sola ricetta di grana per ogni formato |
| Preset intatto | Cambia colore, arresti, direzione e texture |
| Uguale a tutti | Aggiungi un materiale e mantienilo coerente |

Le nove correzioni in una pagina.

## FAQ

### Perché il mio gradiente è grigio al centro?

I colori di lati opposti della ruota, in sRGB, danno una media quasi neutra. Aggiungi un arresto intermedio in una tinta tra i due, oppure interpola in OKLCH.

### Come evito il banding in un gradiente?

Aggiungi uno strato di rumore fine o di grana a bassa opacità, evita la forte compressione JPEG e dai ai gradienti scuri un intervallo di luminosità più ampio da percorrere.

### Quanti colori dovrebbe avere un gradiente?

Di solito da due a quattro colori affini, con al massimo un accento. Oltre cinque arresti, la maggior parte dei gradienti comincia a sembrare caotica.

### Come rendo leggibile il testo su un gradiente?

Metti il testo sulla parte più calma del campo e verifica il contrasto dove lo sfondo è più vicino al testo per luminosità. Punta a 4,5:1 per il testo del corpo e a 3:1 per quello grande.

### I preset dei gradienti sono un male?

No, ma li usano in tanti. Considera un preset un punto di partenza e cambia colori, arresti, direzione e texture prima di usarlo.