# Design con sfondo bianco: quando lo spazio vuoto è la scelta giusta [Canonical HTML page](https://gradiently.design/it/guide/white-background-design) Lo sfondo bianco è la scelta più comune nel design e la più facile da sbagliare. Ecco quando è giusto, quali bianchi usare e come evitare che sembri una pagina vuota. ## The short version - Uno sfondo bianco funziona meglio quando il contenuto è il punto: una foto di prodotto, una lettura lunga, un listino o un solo titolo forte. - Il bianco puro #ffffff è duro sugli schermi per letture lunghe, perciò la maggior parte dei design curati usa un bianco sporco con una leggera tinta calda o fredda. - Il testo nero su bianco ha un rapporto di contrasto altissimo, quindi puoi permetterti un quasi nero più morbido come #1c1917 e leggere comunque bene. - Lo spazio bianco sembra voluto solo quando è generoso e coerente; un layout bianco affollato sembra incompiuto, non minimale. - Un dettaglio discreto, come una grana leggera, un filetto sottile o una luce morbida d’angolo, evita che uno sfondo bianco sembri un file vuoto. Il **design con sfondo bianco** è la scelta migliore quando ciò che sta sopra merita tutta l’attenzione: un prodotto, una fotografia, un lungo paragrafo, una frase che deve colpire. Fallisce quando il bianco è scelto per default, perché allora sembra una pagina che nessuno ha finito. La differenza si riduce a tre decisioni: quale bianco, quanto spazio e un piccolo dettaglio che dica a chi guarda che il vuoto era voluto. ## Quando uno sfondo bianco è la scelta giusta Il bianco non ha un umore suo, ed è la sua forza. Si fa da parte. Per questo è il fondo naturale per tutto ciò che ha un proprio colore o una propria texture, e il fondo peggiore per tutto ciò che ha bisogno di atmosfera per reggersi. ### Il bianco funziona per - Foto di prodotto in cui conta la fedeltà del colore - Letture lunghe: articoli, menu, termini, report - Un solo titolo deciso senza nient’altro - Listini e tabelle comparative - Brand costruiti su sobrietà e chiarezza ### Il bianco fatica con - Eventi serali, musica e tutto ciò che è notturno - Foto chiare e pallide che si fondono con la pagina - Feed in cui ogni concorrente usa già il bianco - Post brevi con troppo poco contenuto per riempire lo spazio - Design che hanno bisogno di calore o di drammaticità Se il tuo design sta a destra di quella tabella, un fondo a tinta morbida o un gradiente delicato di solito lo servirà meglio. [Sfondi minimalisti](https://gradiently.design/it/guide/minimalist-backgrounds) tratta opzioni sommesse oltre il bianco, e [design in modalità scura](https://gradiently.design/it/guide/dark-mode-design) l’estremo opposto. ## Scegli un bianco sporco, non il bianco puro Il `#ffffff` puro è la cosa più luminosa che uno schermo possa mostrare. Per lo sfondo di una foto va bene; per una pagina che si legge per due minuti, abbaglia. Un bianco sporco abbassa un poco la luminosità e dà alla pagina una temperatura. I bianchi caldi sembrano stampati, calmi e umani. I bianchi freddi sembrano clinici, tecnici e precisi. Scegli quello che corrisponde a ciò che vendi. - Bianco puro: #ffffff - Carta: #faf7f2 - Lino: #f7f1e8 - Avena: #f5f0eb - Nuvola: #f4f6f8 - Foschia: #f1f5f4 - Inchiostro caldo: #1c1917 Cinque bianchi sporchi accanto al bianco puro, e un quasi nero caldo da posare sopra. Le differenze sembrano minime nei campioni e sono evidenti su una pagina intera. | Bianco | Esadecimale | Sensazione | Usalo per | | --- | --- | --- | --- | | Bianco puro | `#ffffff` | Luminoso, neutro | Ritagli di prodotto, schede e-commerce | | Carta | `#faf7f2` | Stampato, calmo | Diari, newsletter, menu | | Lino | `#f7f1e8` | Caldo, artigianale | Forni, fioristi, cartoleria | | Nuvola | `#f4f6f8` | Freddo, preciso | Software, finanza, cliniche | | Foschia | `#f1f5f4` | Fresco, pulito | Cura della pelle, benessere, dentisti | Copia un bianco dalla sua temperatura. Poi mantienilo ovunque: un sito, una presentazione e un post in tre bianchi diversi sembrano tre brand. ## Dai aria alle parole Lo spazio bianco non è ciò che avanza. È una decisione di layout, e sembra voluto solo quando è generoso. Una regola pratica: margini di almeno l’8 per cento del lato più corto, cioè 86 px su un post 1080×1350, e più spazio tra i gruppi che al loro interno. Un titolo, una riga breve sotto e un piccolo dettaglio in basso bastano per un post. Un post verticale calmo con un titolo breve centrato in un ampio spazio vuoto Una riga, una piccola sopratestata e un dettaglio discreto. Lo spazio porta tanto significato quanto le parole. Un post verticale con gli orari di apertura, con ampi margini attorno a un breve blocco di testo Un post pratico resta calmo se i margini restano ampi e il carattere resta piccolo. La gerarchia conta più sul bianco che altrove, perché non c’è colore a guidare l’occhio. Usa dimensione e peso per ordinare le parole, come descritto in [gerarchia visiva](https://gradiently.design/it/guide/visual-hierarchy), e se puoi resta su una sola famiglia di caratteri. ## Colore del testo su sfondo bianco Il nero puro su bianco puro ha il contrasto più alto che uno schermo possa mostrare, più di quanto serva per leggere, e può risultare crudo. Un quasi nero con un accenno della temperatura dello sfondo, come `#1c1917` su un bianco caldo o `#0f172a` su uno freddo, supera comunque ogni soglia di accessibilità con margine. Per il testo corrente mantieni un rapporto di contrasto di almeno 4,5:1; [contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility) spiega come verificarlo. > **Il testo grigio chiaro è l’errore classico** Un carattere grigio su un bianco sporco sembra elegante in un file di design e sparisce su un telefono al sole. Se una riga conta, tienila scura. Usa la dimensione, non il pallore, per rendere più sommesso il testo secondario. ## Come evitare che uno sfondo bianco sembri incompiuto Il rischio del bianco è sembrare una tela vuota invece che scelta. Un solo dettaglio discreto basta a risolverlo. Sceglierne uno, non tutti. - **Una grana leggera** a bassissima intensità, così il bianco si legge come una superficie. Vedi [texture a grana](https://gradiently.design/it/guide/textured-background). - **Una luce morbida d’angolo**, un bianco caldo che sfuma in un crema appena più profondo in un angolo. - **Un filetto sottile** o un bordo fine nel colore dell’inchiostro, largo pochi pixel. - **Un colore d’accento** usato una volta sola, su un prezzo, una data o un pulsante. - **Un effetto carta** per brand stampati o artigianali; [texture di carta](https://gradiently.design/it/guide/paper-texture-background) mostra come. - Carta con un angolo caldo: `radial-gradient(circle at 85% 10%, #fde9d4 0%, #faf7f2 45%, #f7f1e8 100%)` - Dal bianco alla nuvola: `linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%)` - Foschia con luce dall’alto: `radial-gradient(ellipse at 50% 0%, #ffffff 0%, #f1f5f4 70%, #e6efec 100%)` Tre bianchi che sono appena dei gradienti. Su un telefono si leggono come bianco con profondità, mai come colore. ## Uno sfondo bianco in CSS Sul web, imposta il bianco sporco una sola volta come variabile così ogni sezione lo condivide, e dai alle immagini uno sfondo coerente perché le foto di prodotto su bianco puro non appaiano come riquadri sul colore carta. ```css :root { --paper: #faf7f2; --ink: #1c1917; --rule: #e7e1d8; } body { margin: 0; background: var(--paper); color: var(--ink); } /* Product photos shot on pure white: blend them into the paper */ .product img { mix-blend-mode: multiply; } hr { border: 0; border-top: 1px solid var(--rule); } ``` `mix-blend-mode: multiply` fa assumere al bianco attorno a una foto di prodotto il colore della pagina, così i ritagli stanno in modo naturale su un bianco sporco. Se vuoi un aspetto bianco con un po’ più di carattere, i Mark chiari di Gradiently sono un buon punto di partenza: fondi morbidi e pallidi con vero materiale e luce, dove la zona più calma si sposta dietro le parole e l’**inchiostro automatico** mantiene ogni riga abbastanza scura da leggersi. Progettare con qualsiasi Mark non riservato è gratis; riserva quello che ti piace quando sei pronto a esportare. ## FAQ ### Qual è il miglior codice colore di bianco sporco per uno sfondo? Un bianco carta caldo come `#faf7f2` si adatta alla maggior parte dei brand editoriali e lifestyle, e un bianco freddo come `#f4f6f8` ai brand di software e clinici. Scegline uno e usalo ovunque. ### Il bianco puro è sbagliato per i siti web? Non è sbagliato, è luminoso. Il bianco puro è ideale dietro i ritagli di prodotto; per letture lunghe, un bianco sporco leggermente tinto è più delicato per gli occhi. ### Che colore di testo sta meglio su uno sfondo bianco? Un quasi nero come `#1c1917` o `#0f172a`. Si legge come nero, mantiene un contrasto ben oltre 4,5:1 ed è più morbido del nero puro. ### Come rendo meno noioso uno sfondo bianco? Aggiungi un dettaglio discreto: una grana leggera, una luce morbida d’angolo, un filetto sottile o un solo colore d’accento. Mantieni generosi i margini così lo spazio sembra scelto. ### Perché le mie foto di prodotto mostrano un riquadro sul sito bianco sporco? Le foto sono state scattate su bianco puro. Usa `mix-blend-mode: multiply` sulle immagini, oppure esportale con lo sfondo trasparente.