Stemningsfulle gradienter: mørke farger med dybde

En stemningsfull gradient er en mørk blanding som oppfører seg som et svakt opplyst rom: Det meste ligger i skygge, ett område fanger lyset, og fargene holdes tilbake fremfor å forsterkes. Oppskriften er enkel å beskrive. Begynn med en farget nesten-svart, legg til én eller to dempede mellomtoner, og la ett lys, gjerne varmt mot en kjølig bunn, gi flaten liv. Nedenfor finner du tolv koder du kan kopiere, og deretter hvordan du bygger din egen og holder teksten leselig oppå.

Hva som gir en gradient stemning, utover mørke

Mange mørke gradienter virker flate. Marineblått som glir over i svart, er mørkt, men har ingen atmosfære. Stemningen kommer fra valg fotografer og filmkolorister gjør instinktivt, og som du kan gjøre bevisst.

• Lav belysning. Omtrent tre firedeler av bildet ligger i skygge. Lys er unntaket, ikke regelen.
• Én kilde. Lyset kommer inn fra et hjørne eller en kant, slik at øyet forstår hvor vinduet eller lampen står.
• Dempet farge. Mellomtonene er litt grålige. En støvet blågrønn gir mer stemning enn en klar.
• Fargede skygger. Det mørkeste punktet er blåsvart, grønnsvart eller okseblodsrødt, aldri #000000.
• Temperaturkontrast. Et lite varmt lys i en kjølig scene, eller motsatt, skaper spenning.

Tolv koder til stemningsfulle gradienter

Hver av disse er én CSS-verdi som du kan lime inn i background. De er løst gruppert etter temperatur: først kjølige og stormfulle, så varme og lampebelyste, og til slutt noen midt imellom.

Vil du ha noe nærmere en klar natt enn en stormfull, er nattehimmelgradienter blåere og har stjerner. For dypere, blankere og mer mettet farge ligger juvelfarger ett trinn lysere enn alt her.

En stemningsfull fargepalett å bygge fra

Når du lager din egen, bruk en palett fremfor bare to farger. Fem er nok: en bunn, to skyggetrinn, én dempet mellomtone og ett lys. Lyset er den eneste fargen som får være virkelig lyssterk, og bør bare dekke et lite område.

Hvorfor varmt lys fungerer så godt mot kjølig skygge, forklares i fargetemperatur. Se mørke fargepaletter for flere ferdige kombinasjoner.

Slik lager du en stemningsfull gradient i CSS

1. 1

   Velg en farget bunn

   Velg en nesten-svart med et hint av farge, som #0b0d12 for blåsvart eller #120806 for varm brunsvart. Bruk den også som reserveverdi i background-color.

2. 2

   Bygg opp skyggene

   Legg en forsiktig lineær gradient mellom to mørke trinn i samme fargetone. Det gir bildet dybde før noe lys kommer til.

3. 3

   Plasser ett lys

   Legg til en radial gradient i et hjørne som toner ut til transparent ved omtrent 40 prosent. Hold fargen dempet og opasiteten godt under full.

4. 4

   Legg til et kjølig motlys

   Du kan legge en annen, større og svakere radial gradient i motsatt hjørne, i kjølige farger. Den hindrer skyggesiden i å virke livløs.

5. 5

   Avslutt med korn

   Et fint støylag med lav opasitet skjuler fargebånd og gir flaten et filmpreg. Kornete gradienter har koden.

.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%);
}

Tekst på en stemningsfull bakgrunn

Lys tekst på mørk bunn er lett å lese, helt til den krysser det ene lyse feltet du har jobbet med. Planlegg overskriften på skyggesiden, og hold lyset unna ordene fremfor bak dem. En myk, brukket hvit, som #ece6dc, passer bedre til en stemningsfull bunn enn rent hvitt, som kan virke hardt.

Versjonen til høyre viser hva en Mark fra Gradiently gjør selv: Den vet hvor ordene er, gjør fargene rundt bokstavene dypere og velger lys eller mørk tekst for hver linje fra sin egen palett, uten ekstra bokser eller skygger. Tekst på en gradient forklarer hvordan du gjør det manuelt.

Hvor stemningsfulle gradienter fungerer best

De passer til natt, musikk, drikke, film, parfyme og stillferdig luksus. De passer langt dårligere til et barneselskap eller sommersalg. For et helt grensesnitt i denne stilen forklarer mørke gradientbakgrunner hva skjermer krever av ekstra omtanke.

Vil du slippe å finjustere lag for hånd, har Markedet levende Marks med akkurat dette uttrykket, søkbare med ord som «deep teal» eller «oxblood». Du kan designe gratis med enhver Mark som ingen har sikret seg. Sikrer du deg en, får ingen andres plakat akkurat samme atmosfære.