Gradienti malinconici: codici scuri ricchi di atmosfera

Un gradiente malinconico è una sfumatura scura che si comporta come una stanza poco illuminata: gran parte del riquadro sta nell’ombra, una zona cattura la luce e i colori sono trattenuti anziché spinti. La ricetta è semplice da dire. Parti da un quasi nero con una tinta, aggiungi uno o due toni medi attenuati e lascia che una sola luce, spesso calda su un fondo freddo, dia vita alla superficie. Qui sotto trovi dodici codici da copiare, poi come costruire il tuo e mantenere leggibili le parole sopra.

Cosa rende malinconico un gradiente, non solo scuro

Molti gradienti scuri sembrano piatti. Il blu notte che sfuma nel nero è scuro, ma non ha clima. L’atmosfera nasce da poche decisioni che fotografi e coloristi del cinema prendono d’istinto, e tu puoi prenderle di proposito.

• Low key. Circa tre quarti del riquadro sono ombra. La luce è l’eccezione, non la regola.
• Una sola fonte. La luce entra da un angolo o da un bordo, così l’occhio sa dov’è la finestra o la lampada.
• Colore trattenuto. I toni medi sono leggermente smorzati. Un verde acqua polveroso sembra più malinconico di uno brillante.
• Ombre colorate. Il punto più scuro è nero bluastro, nero verdastro o rosso bue, mai #000000.
• Contrasto di temperatura. Una piccola luce calda in una scena fredda, o il contrario, crea tensione.

Dodici codici di gradienti malinconici

Ognuno è un singolo valore CSS che puoi incollare in background. Sono raggruppati liberamente per temperatura: prima quelli freddi e tempestosi, poi quelli caldi, da lampada, poi qualcuno a metà strada.

Se vuoi qualcosa di più vicino a una notte limpida che a una tempestosa, i gradienti del cielo notturno tendono più al blu e aggiungono le stelle. Per un colore più profondo e lucido, con più saturazione, i toni gioiello stanno un gradino sopra tutto ciò che c’è qui.

Una palette di colori malinconica da cui partire

Quando crei la tua, lavora con una palette anziché con due colori. Cinque bastano: un fondo, due gradini d’ombra, un tono medio attenuato e una luce. La luce è l’unico colore a cui è concessa una vera luminosità, e deve comparire in un’area piccola.

Il motivo per cui la luce calda funziona così bene contro l’ombra fredda è spiegato in temperatura del colore. Per altre serie già pronte, vedi palette di colori scuri.

Come fare un gradiente malinconico in CSS

1. 1

   Imposta un fondo con una tinta

   Scegli un quasi nero con una tonalità dentro, come #0b0d12 per un nero bluastro o #120806 per un nero marrone caldo. Usalo anche come ripiego di background-color.

2. 2

   Aggiungi il corpo dell’ombra

   Stendi un lieve gradiente lineare tra due gradini scuri della stessa tinta. Dà profondità al riquadro prima che arrivi qualsiasi luce.

3. 3

   Posiziona una luce

   Aggiungi un gradiente radiale in un angolo che sfuma in transparent verso il 40 per cento. Tieni il suo colore attenuato e la sua opacità ben sotto il massimo.

4. 4

   Aggiungi una controluce fredda

   Facoltativamente, un secondo radiale più grande e più fioco nell’angolo opposto, nella famiglia fredda. Evita che il lato in ombra si spenga.

5. 5

   Finisci con la grana

   Uno strato di rumore fine a bassa opacità nasconde le bande e fa sentire la superficie come pellicola. I gradienti con grana ha il codice.

.moody {
  background-color: #0b0d12; /* tinted ground and fallback */
  background-image:
    radial-gradient(circle at 78% 18%, rgba(201, 138, 58, 0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 100%, rgba(31, 58, 68, 0.8) 0%, transparent 55%),
    linear-gradient(165deg, #151a22 0%, #0b0d12 100%);
}

Mettere le parole su uno sfondo malinconico

Il testo chiaro su fondo scuro si legge bene, finché non attraversa l’unica macchia luminosa su cui hai lavorato tanto. Pensa il titolo per il lato in ombra e tieni la luce lontana dalle parole anziché dietro di esse. Un bianco sporco morbido, come #ece6dc, sta più comodo su un fondo malinconico del bianco puro, che può sembrare duro.

La versione di destra è ciò che fa da solo un Mark di Gradiently: sa dove sono le parole, approfondisce il colore vicino alle lettere e sceglie testo chiaro o scuro riga per riga dalla propria palette, senza aggiungere riquadri o ombre. Il testo su un gradiente tratta la versione manuale.

Dove i gradienti malinconici funzionano meglio

Vanno bene per notte, musica, drink, cinema, profumi e lusso discreto. Vanno molto meno bene per una festa di bambini o per i saldi estivi. Per un’intera interfaccia in questo registro, gli sfondi a gradiente scuro tratta le cure in più che richiedono gli schermi.

Se preferisci non regolare gli strati a mano, il Mercato ha Mark vivi esattamente in questo registro, che puoi cercare con parole come «verde petrolio intenso» o «rosso bue». Puoi progettare gratis con qualsiasi Mark non riservato, e riservarne uno significa che il poster di nessun altro avrà la stessa atmosfera.