Mørke gradientbakgrunner: dybde uten et dystert uttrykk

En god mørk gradientbakgrunn er en farget nesten svart bunn med én farge som gløder ut av den, som om én lampe lyser i et mørkt rom. Fargetonen gir det svarte dybde, den opplyste fargen gir øyet et sted å gå, og den store mørke flaten gjør hvit skrift skarp. Uten disse tre tingene ser en mørk gradient bare ut som en lyssvak skjerm.

Begynn med en farget nesten svart bunn

Rent svart #000000 er en blindvei: det er ingenting å blande fra, og enhver farge ved siden av ser påklistret ut. Nesten svart med et hint av farge gir gradienten en familie å høre til i. Blåsvart virker kjølig og teknisk, fiolettsvart virker luksuriøst, grønnsvart virker naturlig, og varme bruntoner minner om skinn og tre. Velg en tone som passer til fargen du vil lyse opp.

Legg til én lysende farge

Den lysende fargen gjør mørke til stemning. Plasser den utenfor midten, vanligvis nær en kant eller et hjørne, så den oppfattes som en lyskilde. Hold den i samme familie som bunntonen: fiolett lys på fiolettsvart, blågrønt på blåsvart. Én farge er nesten alltid nok. To kan fungere hvis de er nabofarger. Flere begynner å ligne en nattklubb, noe som er fint hvis det er det du designer for; se neongradienter.

Hvorfor noen mørke gradienter virker dystre

Den vanligste feilen er å blande den opplyste fargen mot grått på vei til svart. Behold fargestyrken mens den mørkner: fiolett bør bli dypere fiolett, så fiolettsvart, aldri grått. Blanding i OKLCH hjelper; grumsete gradienter forklarer hvorfor.

Fargebånd: den største risikoen ved mørke gradienter

Mørke gradienter spenner over et lite verdiområde, ofte bare et dusin eller to per kanal, og folk er svært følsomme for små trinn mellom mørke toner. En jevn mørk overgang over hele skjermen er derfor en oppskrift på synlige striper. Tre vaner hindrer dette: gi overgangen nok spenn, legg til fint korn og eksporter uten hard komprimering. Se detaljene i fargebånd i gradienter og kornete gradienter.

Tekst på en mørk gradient

Mørke bakgrunner er gode for typografi, men bare i de mørke områdene. Hold ordene unna den opplyste fargen, der kontrasten synker. Bruk brukket hvitt fremfor rent hvitt til lange tekster, fordi rent hvitt på nesten svart kan blende. Og mål: WCAG krever minst 4.5:1 for brødtekst og 3:1 for stor tekst. Dette kan du kontrollere med WebAIMs kontrastkontroll.

Hvor mørke gradientbakgrunner fungerer best

Mørke gradienter passer til alt som skjer om natten, føles eksklusivt eller trenger lysende farger: musikk og arrangementer, film og spill, teknologilanseringer, parfyme og brennevin, og porteføljer der arbeidene bør være det lyseste på siden. De hjelper også produktbilder, fordi en opplyst gjenstand på mørk bunn oppfattes som verdifull.

• Omslag og plakater: en mørk bunn lar én lys tittel spille hovedrollen
• Stories og Reels: mørke bilder over hele skjermen gir filmfølelse på telefon
• Lysbilder: lys tekst på mørk bunn er roligere i et dunkelt rom enn mørk tekst på hvitt
• Toppfelt på nettsider: et mørkt toppfelt får første skjermbilde til å virke gjennomtenkt; se bakgrunner til toppfelt

De passer dårligere når folk skal lese lenge på papir, eller når en merkevare bygger på dagslys, friskhet eller lek. Da gjør en lys bunn med én myk farge samme jobb.

En mørk gradientbakgrunn i 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;
}

Hvis du designer et helt grensesnitt i mørk modus fremfor én bakgrunn, se design for mørk modus. Mange Marks i Markedet er bygget på mørke bunner, og de gir automatisk plass til ordene dine ved å flytte sitt roligste område bak teksten.