Gradiente bianco: codici di luce sottile per design puliti

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.

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.

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.

Se vuoi un po’ più di colore mantenendo la stessa leggerezza, i gradienti pastello sono il passo successivo. Per l’estremo opposto della scala dei neutri, vedi i codici del gradiente grigio.

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.

Sfondi per foto di prodotto 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.

/* 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;
}

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 approfondisce dissolvenze e sovrapposizioni.

Bianco pulito, non slavato

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.

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 ha altre idee nello stesso spirito, e sfondi hero per siti web mostra come un gradiente porcellana o luce del mattino possa reggere un’intera landing page.

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.