# Gradiente bianco: codici di luce sottile per design puliti

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

Un gradiente bianco è il gradiente più silenzioso che esista, e quello che la maggior parte dei designer sbaglia di poco. Questi codici mostrano quanta variazione basta, quali tinte usare e come sfumare nel bianco in modo pulito.

## The short version

- Un gradiente bianco fonde il bianco puro in un bianco sporco più scuro di pochi punti percentuali, con tinta calda, fredda o perlata.
- I bianchi sporchi con una leggera tinta calda sembrano carta; quelli con una leggera tinta azzurra sembrano porcellana o neve.
- Un gradiente bianco ha bisogno di una gamma sufficiente per sopravvivere agli schermi luminosi dei telefoni, dove le differenze piccolissime spariscono.
- Per sfumare un contenuto in uno sfondo bianco in CSS, usa un gradiente da `rgb(255 255 255 / 0)` a `#ffffff`.
- I gradienti bianchi sono ottimi sfondi per i prodotti, perché una caduta morbida sembra uno studio illuminato più che un ritaglio piatto.

Un **gradiente bianco** passa dal bianco puro a un bianco sporco appena più scuro, di solito con una delicata tinta calda, fredda o perlata. La variazione è piccola di proposito: deve sembrare luce che cade su una superficie, non colore. Per questo i gradienti bianchi sono ideali per siti puliti, foto di prodotto, inviti e post social minimali. Qui sotto trovi quanto renderlo marcato, una palette di bianchi sporchi, codici da copiare e il modo giusto di sfumare nel bianco in CSS.

## Quanta variazione serve a un gradiente bianco

Troppo poca e nessuno la vede, soprattutto su un telefono alla massima luminosità. Troppa e il bianco diventa grigio e sporco. La tabella dà tre intensità, misurate da quanto il colore finale sta sotto il bianco puro. La maggior parte dei design vuole quella di mezzo.

| Intensità | Da | A | Usalo per |
| --- | --- | --- | --- |
| Sussurro | `#ffffff` | `#f8f8f8` | Grandi sezioni web, letture lunghe |
| Morbida | `#ffffff` | `#efefef` | Schede, post social, inviti |
| Visibile | `#ffffff` | `#e2e2e2` | Sfondi di prodotto, fondali da studio |

Valori neutri per chiarezza. In pratica, tingi il colore finale di caldo o di freddo, come nei codici qui sotto.

## Bianchi sporchi da cui partire

I grigi neutri puri alla fine di un gradiente bianco sembrano un po’ spenti. Una traccia di tinta fa la differenza: i bianchi sporchi caldi sembrano carta, lino e avorio; quelli freddi sembrano porcellana, brina e neve. Scegli la tinta che si accorda con il resto della palette e mantienila coerente in un insieme di design.

- Bianco puro: #ffffff
- Avorio: #fffdf8
- Carta: #f6f4f0
- Lino: #f1ece3
- Porcellana: #f1f4f7
- Brina: #eaf2f8
- Lilla perlato: #f3eef8
- Menta perlata: #eef6f6

Bianchi sporchi. Su una pagina bianca sembrano quasi identici; fianco a fianco, le famiglie calda e fredda sono nettamente diverse.

## Codici di gradiente bianco

Ognuno parte dal bianco puro o molto vicino. Carta e avorio sono caldi ed editoriali. Porcellana e brina sono freddi e tecnici. Luce del mattino aggiunge un bagliore morbido da un angolo, e perla fonde diverse tinte appena accennate per un’iridescenza delicata che non scivola mai nell’arcobaleno.

- Carta: `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)`
- Avorio: `linear-gradient(150deg, #fffdf8 0%, #f8f1e4 100%)`
- Porcellana: `linear-gradient(160deg, #ffffff 0%, #f1f4f7 60%, #e6ebf0 100%)`
- Brina: `linear-gradient(180deg, #f8fbfd 0%, #eaf2f8 100%)`
- Luce del mattino: `radial-gradient(ellipse at 20% 0%, #ffffff 0%, #fbf8f2 45%, #f1ece3 100%)`
- Perla: `linear-gradient(135deg, #fdfcfb 0%, #f3eef8 35%, #eef6f6 65%, #fbf7f0 100%)`

Sei gradienti bianchi. Su uno schermo luminoso si leggono come superfici più che come colori, ed è proprio questo il punto.

Se vuoi un po’ più di colore mantenendo la stessa leggerezza, i [gradienti pastello](https://gradiently.design/it/guide/pastel-gradients) sono il passo successivo. Per l’estremo opposto della scala dei neutri, vedi i codici del [gradiente grigio](https://gradiently.design/it/guide/grey-gradient).

## Un gradiente bianco dietro i prodotti

I fotografi illuminano un fondale bianco perché sfumi dolcemente verso i bordi, il che separa l’oggetto dallo sfondo senza una linea d’ombra. Un gradiente bianco radiale fa lo stesso su schermo. È particolarmente utile quando ritagli un prodotto dalla sua foto: un bianco piatto dietro sembra incollato, mentre un fondale morbido sembra uno studio.

Fondale da studio: `radial-gradient(ellipse at 50% 35%, #ffffff 0%, #f3f3f3 55%, #e2e2e2 100%)`

Più luminoso appena sopra il centro, dove sta il prodotto, e che cade su un grigio chiaro agli angoli. Usalo a 2048×2048 per le immagini prodotto di Shopify.

[Sfondi per foto di prodotto](https://gradiently.design/it/guide/product-photo-backgrounds) tratta ombre, fondali colorati e quando il bianco è la scelta sbagliata.

## Sfumare nel bianco con un gradiente CSS

Il gradiente bianco più comune sul web non è affatto uno sfondo: è una dissolvenza che ammorbidisce la fine di un articolo troncato, il fondo di una lista scorrevole o il bordo di una foto. Scrivi l’estremo trasparente come bianco con opacità zero. I browser moderni miscelano correttamente `transparent`, ma `rgb(255 255 255 / 0)` dice esattamente ciò che intendi ed evita la banda grigiastra che alcuni motori più vecchi disegnavano.

```css
/* soften the end of a clipped block of text */
.excerpt {
  position: relative;
  max-height: 12rem;
  overflow: hidden;
}

.excerpt::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, #ffffff 90%);
  pointer-events: none;
}
```

Una dissolvenza che termina in bianco pieno poco prima del bordo inferiore, così l’ultima riga di testo sparisce in modo pulito. Fai corrispondere il colore finale allo sfondo della pagina.

Se lo sfondo della tua pagina è un bianco sporco e non bianco puro, sfuma verso quel colore, altrimenti la dissolvenza finirà in una striscia più chiara visibile. [Gradiente CSS trasparente](https://gradiently.design/it/guide/css-gradient-transparent) approfondisce dissolvenze e sovrapposizioni.

## Bianco pulito, non slavato

### Slavato

- Che finisce in un grigio medio neutro
- Variazioni così piccole che spariscono su un telefono
- Testo grigio chiaro su un gradiente bianco sporco
- Bianchi sporchi caldi e freddi mescolati
- Sfumare nel bianco su una pagina color crema

### Pulito

- Che finisce in un bianco sporco leggermente tinto
- Una variazione morbida ma visibile, controllata su un telefono
- Testo quasi nero o blu notte profondo
- Una sola famiglia di tinte ovunque
- Sfumare nell’esatto colore di sfondo della pagina

Anche i gradienti bianchi fanno banding, anche se meno di quelli scuri; se vedi gradini su un monitor grande, una grana finissima lo risolve, come spiega [banding dei gradienti](https://gradiently.design/it/guide/gradient-banding).

## Gradienti bianchi nei design minimali

I design minimali vivono o muoiono per la tipografia, e il bianco non le lascia dove nascondersi. Usa un inchiostro deciso, quasi nero, molto spazio e un dettaglio a colori. Un gradiente bianco aggiunge giusto la dimensione che serve a far sembrare la pagina illuminata e finita. [Sfondi minimalisti](https://gradiently.design/it/guide/minimalist-backgrounds) ha altre idee nello stesso spirito, e [sfondi hero per siti web](https://gradiently.design/it/guide/website-hero-background) mostra come un gradiente porcellana o luce del mattino possa reggere un’intera landing page.

Un invito di nozze verticale con sfondo bianco avorio morbido e la scritta Siete invitati in carattere scuro

Un invito 5×7 pollici su un Mark avorio morbido. Inchiostro scuro, margini generosi e nient’altro.

In Gradiently, i Mark chiari funzionano come quelli audaci: il Mark mantiene un’area calma dietro le parole e l’inchiostro automatico sceglie un colore di testo scuro dalla palette del Mark stesso, così un bianco delicato non finisce mai con testo grigio che sparisce.

## FAQ

### Qual è un buon codice per un gradiente bianco?

Per un effetto carta morbido, prova `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)`. Per un effetto porcellana fredda, finisci invece su #e6ebf0.

### Come creo un gradiente da bianco a trasparente in CSS?

Usa `linear-gradient(180deg, rgb(255 255 255 / 0), #ffffff)`. Cambia il colore finale con lo sfondo della pagina se non è bianco puro.

### Perché il mio gradiente bianco è invisibile?

Il colore finale è troppo vicino al bianco. Scuriscilo fino a circa #efefef, tinto leggermente di caldo o di freddo, e controllalo su un telefono alla massima luminosità.

### Che colore di testo funziona su un gradiente bianco?

Quasi nero, antracite o blu notte profondo. Evita i caratteri grigio chiaro, che svaniscono nell’estremo più scuro del gradiente.