Sfondo gradiente scuro: profondità senza cupezza

Un buon sfondo con gradiente scuro è un quasi nero tinto da cui esce un solo colore luminoso, come se in una stanza buia fosse accesa una sola lampada. La tinta dà profondità ai neri, il colore acceso dà all’occhio un punto in cui andare, e la grande area scura fa sembrare nitido il testo bianco. Senza queste tre cose, un gradiente scuro sembra solo uno schermo spento a metà.

Parti da un quasi nero tinto

Il nero puro #000000 è un vicolo cieco: non c’è nulla da cui sfumare, e qualsiasi colore accanto sembra incollato. Un quasi nero con una punta di tinta dà al gradiente una famiglia di cui far parte. I neri bluastri sono freddi e tecnici, quelli violacei danno un tono di lusso, quelli verdi sanno di natura e i marroni caldi ricordano pelle e legno. Scegli la tinta che si accorda con il colore che vuoi accendere.

Aggiungi un solo colore acceso

Il colore acceso trasforma il buio in atmosfera. Mettilo fuori centro, di solito vicino a un bordo o a un angolo, così si legge come una fonte di luce. Tienilo nella stessa famiglia della tinta: luce viola su nero violaceo, verde acqua su nero bluastro. Un colore basta quasi sempre. Due possono funzionare se sono vicini nel cerchio cromatico. Oltre, si passa a un locale notturno, il che va bene se stai progettando proprio quello: vedi i gradienti neon.

Perché certi gradienti scuri sembrano cupi

L’errore più comune è mescolare il colore acceso verso il grigio mentre scende al nero. Mantieni alta la saturazione mentre si scurisce: il viola deve diventare viola più profondo, poi nero violaceo, mai grigio. Sfumare in OKLCH aiuta; i gradienti sporchi spiegano perché.

Banding: il rischio maggiore del gradiente scuro

I gradienti scuri coprono solo un piccolo intervallo di valori, spesso una dozzina o due per canale, e siamo molto sensibili ai piccoli salti tra toni scuri. Una sfumatura scura e liscia su tutto lo schermo è quindi la ricetta perfetta per strisce visibili. Tre abitudini la evitano: dare alla sfumatura abbastanza intervallo, aggiungere una grana fine ed esportare senza compressione pesante. I dettagli sono in banding nei gradienti e gradienti granulosi.

Il testo su un gradiente scuro

Gli sfondi scuri sono generosi con il testo, ma solo nelle zone scure. Tieni le parole lontane dal colore acceso, dove il contrasto cala. Per i passaggi lunghi usa un bianco sporco invece del bianco puro, perché il bianco puro su quasi nero può abbagliare. E misura: le WCAG chiedono almeno 4,5:1 per il testo corrente e 3:1 per il testo grande, e puoi verificarlo con il WebAIM contrast checker.

Dove funzionano meglio gli sfondi con gradiente scuro

I gradienti scuri vanno bene per tutto ciò che succede di notte, ha un tono premium o ha bisogno di un colore che brilli: musica ed eventi, cinema e giochi, lanci tecnologici, profumi e distillati, e portfolio in cui il lavoro deve essere la cosa più luminosa della pagina. Aiutano anche la fotografia di prodotto, perché un oggetto illuminato su fondo scuro sembra prezioso.

• Copertine e poster: un fondo scuro fa del titolo luminoso l’eroe
• Storie e Reel: i fotogrammi scuri a schermo intero sono cinematografici su un telefono
• Slide: testo chiaro su scuro riposa di più in una stanza in penombra del testo scuro su bianco
• Hero dei siti web: una hero scura fa sembrare intenzionale la prima schermata; vedi sfondi per la hero del sito

Vanno meno bene dove si legge a lungo su carta, o dove un brand si fonda su luce del giorno, freschezza o gioco. Lì un fondo chiaro con un solo colore morbido fa lo stesso lavoro.

Uno sfondo con gradiente scuro in CSS

.dark-hero {
  background-color: #0b0f1a; /* fallback */
  background-image:
    radial-gradient(circle at 85% 15%, #1d4ed8 0%, transparent 45%),
    linear-gradient(180deg, #0b0f1a 0%, #0f172a 100%);
  color: #e5e7eb;
}

.dark-hero h1 {
  color: #ffffff;
}

Se stai progettando un’intera interfaccia in modalità scura e non un solo sfondo, vedi design in dark mode. Molti Mark del Mercato sono costruiti su fondi scuri e fanno spazio alle tue parole in automatico, spostando la loro zona più calma dietro il testo.