# Mørke gradientbakgrunner: dybde uten et dystert uttrykk

[Canonical HTML page](https://gradiently.design/nb/guide/dark-gradient-backgrounds)

Mørke gradienter kan se ut som en eksklusiv nattscene eller en grumsete skjerm med lav lysstyrke. Forskjellen ligger i noen få valg som er enkle å ta i bruk.

## The short version

- En mørk gradientbakgrunn med dybde starter med en farget nesten svart bunn i stedet for rent svart, og legger til én lysende farge som stiger frem fra den.
- Mørke gradienter virker dystre når de mangler lyskilde, fargetone i det svarte og kontrast mellom mørke og opplyste områder.
- Mørke gradienter får mer fargebånd enn andre typer, så de trenger nesten alltid fint korn og forsiktig eksport.
- Lys tekst på en mørk gradient bør ligge i det mørkeste området og ha et kontrastforhold på minst 4.5:1 for brødtekst.
- Brukket hvitt og litt lysere svart er mer behagelig for øynene enn rent hvitt på rent svart.

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.

- Blåsvart: #0b0f1a
- Fiolettsvart: #120b1a
- Grønnsvart: #0a1411
- Umbrasvart: #160c0a
- Nøytralt svart: #0f0f10

Fem nesten svarte nyanser. Side om side er fargetonene tydelige; hver for seg oppfattes de som svart med en stemning.

## 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](https://gradiently.design/nb/guide/neon-gradients).

- Fiolett lampe: `radial-gradient(circle at 80% 20%, #6d28d9 0%, #2e1065 30%, #0c0a1d 70%)`
- Blågrønn horisont: `linear-gradient(180deg, #030712 0%, #042f2e 65%, #0f766e 100%)`
- Glør: `radial-gradient(ellipse at 50% 110%, #ea580c 0%, #7c2d12 30%, #1c0a05 65%, #0c0605 100%)`
- Blåtimen: `linear-gradient(160deg, #020617 0%, #0f172a 45%, #1e3a8a 100%)`
- Roserøyk: `radial-gradient(circle at 20% 80%, #be185d 0%, #4a044e 35%, #0f0710 75%)`
- Mosenatt: `linear-gradient(135deg, #050a07 0%, #0f2419 55%, #166534 100%)`

Seks mørke gradienter, hver med en farget nesten svart bunn og én lysende farge. Det meste av hver prøve er mørkt.

## Hvorfor noen mørke gradienter virker dystre

### Dystert

- Rent svart som glir over i mørkegrått
- Jevnt fordelt lys uten en kilde
- Den opplyste fargen dempet mot grått
- Synlige striper gjennom den mørke overgangen
- Grå tekst på en gråsvart bunn

### Fyldig

- Nesten svart med en tydelig fargetone
- Én lyskilde utenfor midten som tones ut
- Den opplyste fargen beholder metningen på sitt lyseste punkt
- Fint korn over hele flaten
- Brukket hvit tekst i det mørkeste området

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](https://gradiently.design/nb/guide/muddy-gradients) 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](https://gradiently.design/nb/guide/gradient-banding) og [kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients).

> **Sjekk på en telefon** Fargebånd som er usynlige på en kalibrert skjerm, kan være tydelige på en telefon med full lysstyrke etter at en sosial plattform har komprimert bildet på nytt. Kontroller alltid den opplastede versjonen.

## 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](https://webaim.org/resources/contrastchecker/).

| Tekstfarge | På `#0b0f1a` | Bruk til |
| --- | --- | --- |
| `#ffffff` hvitt | Omtrent 19:1 | Overskrifter og korte etiketter |
| `#e5e7eb` brukket hvitt | Omtrent 15:1, mykere | Brødtekst og lengre lesing |
| `#9ca3af` mellomgrått | Omtrent 7.5:1, oppfyller AA | Bildetekster og sekundærtekst |
| `#4b5563` mørkegrått | Omtrent 2.5:1, oppfyller ikke kravet | Unngå til alt folk må lese |

Tekstfarger på en blåsvart bunn. Kontroller alltid kontrasten på det lyseste punktet bak ordene, ikke det mørkeste.

Et kvadratisk omslag med tittelen Etter stengetid og en sterk glød bak ordene

Lyset går rett bak tittelen og gjør den flat.

Det samme kvadratiske omslaget med den mørkere delen av gradienten bak tittelen

Med mørk bunn bak tittelen rammer lyset den inn i stedet.

## 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](https://gradiently.design/nb/guide/website-hero-background)

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

```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;
}
```

En blåsvart bunn med ett blått lys øverst til høyre, brukket hvit brødtekst og hvite overskrifter. Avslutt med et kornlag.

Hvis du designer et helt grensesnitt i mørk modus fremfor én bakgrunn, se [design for mørk modus](https://gradiently.design/nb/guide/dark-mode-design). 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.

## FAQ

### Hvordan får jeg en mørk gradientbakgrunn til å se bra ut?

Bruk en farget nesten svart bunn i stedet for rent svart, legg til én lysende farge fra samme familie utenfor midten, og avslutt med fint korn.

### Hvorfor har den mørke gradienten min striper?

Mørke overganger spenner over svært få fargeverdier, så trinnene blir brede og lette å se. Legg til korn, øk spennet og eksporter med høy kvalitet.

### Hvilken tekstfarge fungerer på en mørk gradient?

Hvitt til overskrifter og brukket hvitt som `#e5e7eb` til brødtekst, plassert i det mørkeste området. Kontroller at brødtekst har minst 4.5:1 i kontrast.

### Bør jeg bruke rent svart i en gradient?

Sjelden. Nesten svart med en svak fargetone blandes mer naturlig og gir gradienten dybde.

### Hvilke farger passer til en svart gradient?

Dyp fiolett, blågrønt, blått, glødende oransje og roserosa fungerer alle som én lysende farge på en nesten svart bunn fra samme fargefamilie.