# Mørke gradientbaggrunde: dybde uden dysterhed

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

Mørke gradienter kan ligne en eksklusiv natscene eller en mudret skærm med lysstyrken skruet ned. Forskellen er en håndfuld beslutninger, alle lette at kopiere.

## The short version

- En rig mørk gradientbaggrund starter fra et farvet næsten-sort frem for rent sort og tilføjer så én oplyst farve, der rejser sig ud af det.
- Mørke gradienter ser dystre ud, når de ikke har nogen lyskilde, ingen farve i det sorte og ingen kontrast mellem de mørke og oplyste områder.
- Mørke gradienter får mere banding end alle andre, så de har næsten altid brug for fint korn og omhyggelig eksport.
- Lys tekst på en mørk gradient bør sidde i det mørkeste område og have et kontrastforhold på mindst 4,5:1 til brødtekst.
- Off-white typografi og let løftede sorte toner er lettere for øjnene end rent hvidt på rent sort.

En god **mørk gradientbaggrund** er et farvet næsten-sort med én farve, der gløder ud af det, som om et enkelt lys var tændt i et mørkt rum. Farvetonen giver det sorte dybde, den oplyste farve giver øjet et sted at gå hen, og det store mørke område får hvid typografi til at se skarp ud. Uden de tre ting ligner en mørk gradient blot en dæmpet skærm.

## Start med et farvet næsten-sort

Rent sort `#000000` er en blindgyde: der er intet at blande fra, og enhver farve ved siden af ser klistret på. Et næsten-sort med et strejf af farvetone giver gradienten en familie at høre til. Blåsort føles køligt og teknisk, violetsort føles eksklusivt, grønsort føles naturligt, og varme brune toner føles som læder og træ. Vælg den farvetone, der matcher den farve, du planlægger at oplyse.

- Blåsort: #0b0f1a
- Violetsort: #120b1a
- Grønsort: #0a1411
- Umbrasort: #160c0a
- Neutralt sort: #0f0f10

Fem næsten-sorte. Side om side er farvetonerne tydelige. Alene læses de som sort med en stemning.

## Tilføj én oplyst farve

Den oplyste farve er det, der gør mørke til stemning. Placér den skævt, som regel nær en kant eller et hjørne, så den læses som en lyskilde. Hold den i samme familie som farvetonen: violet lys på violetsort, turkis på blåsort. Én farve er næsten altid nok. To kan virke, hvis de er naboer. Mere end det begynder at ligne en natklub, hvilket er fint, hvis du designer til en. Se [neongradienter](https://gradiently.design/da/guide/neon-gradients).

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

Seks mørke gradienter, hver et farvet næsten-sort med én oplyst farve. Det meste af hver prøve forbliver mørkt.

## Hvorfor nogle mørke gradienter ser dystre ud

### Dyster

- Rent sort, der blandes ind i mørkegråt
- Lys spredt jævnt, ingen kilde
- Den oplyste farve dæmpet mod gråt
- Synlige striber hen over den mørke skala
- Grå tekst på en gråsort baggrund

### Rig

- Et farvet næsten-sort med en tydelig farvetone
- Ét lys, skævt placeret, der falmer ud
- Den oplyste farve holdt mættet i sit lyseste punkt
- Fint korn over hele fladen
- Off-white tekst i det mørkeste område

Den mest almindelige fejl er at blande den oplyste farve mod gråt på vej mod sort. Hold kromatikken oppe, mens den mørkner: violet skal blive dybere violet, så violetsort, aldrig grå. At blande i OKLCH hjælper. [Mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients) forklarer hvorfor.

## Banding: den mørke gradients største risiko

Mørke gradienter spænder over et lille værdiområde, ofte et dusin eller to pr. kanal, og folk er meget følsomme over for små trin mellem mørke toner. En jævn mørk skala hen over en hel skærm er derfor den perfekte opskrift på synlige striber. Tre vaner forebygger det: giv skalaen nok spændvidde, tilføj fint korn, og eksportér uden kraftig komprimering. Detaljerne står i [gradientbanding](https://gradiently.design/da/guide/gradient-banding) og [kornede gradienter](https://gradiently.design/da/guide/grainy-gradients).

> **Tjek på en telefon** Banding, der er usynlig på en kalibreret skærm, kan være tydelig på en telefon ved fuld lysstyrke, efter at en social platform har komprimeret billedet igen. Prøv altid den uploadede version.

## Tekst på en mørk gradient

Mørke baggrunde er generøse over for typografi, men kun i de mørke områder. Hold ordene væk fra den oplyste farve, hvor kontrasten falder. Brug off-white frem for rent hvidt til lange passager, for rent hvidt på næsten sort kan føles blændende. Og mål: WCAG kræver mindst 4,5:1 til brødtekst og 3:1 til stor tekst, hvilket du kan tjekke med [WebAIM’s kontrastværktøj](https://webaim.org/resources/contrastchecker/).

| Tekstfarve | På `#0b0f1a` | Bruges til |
| --- | --- | --- |
| `#ffffff` hvid | Omkring 19:1 | Overskrifter og korte labels |
| `#e5e7eb` off-white | Omkring 15:1, blødere | Brødtekst og lang læsning |
| `#9ca3af` mellemgrå | Omkring 7,5:1, består AA | Billedtekster og sekundær tekst |
| `#4b5563` mørkegrå | Omkring 2,5:1, dumper | Undgå til alt, folk skal læse |

Tekstfarver på en blåsort baggrund. Tjek altid kontrasten i det lyseste punkt bag ordene og ikke det mørkeste.

Et kvadratisk cover med titlen Efter lukketid, hvor et skarpt skær sidder bag ordene

Lyset løber lige bag titlen og gør den flad.

Det samme kvadratiske cover med den mørkere del af gradienten bag titlen

Med den mørke baggrund bag titlen rammer lyset den ind i stedet.

## Hvor mørke gradientbaggrunde virker bedst

Mørke gradienter passer til alt, der sker om natten, føles eksklusivt eller har brug for, at farve gløder: musik og events, film og spil, teknologilanceringer, parfume og spiritus og porteføljer, hvor arbejdet skal være det lyseste på siden. De hjælper også produktfotografering, fordi en oplyst genstand på en mørk baggrund læses som kostbar.

- **Covers og plakater:** en mørk baggrund gør én lys titel til helten
- **Stories og Reels:** mørke helskærmsbilleder føles filmiske på en telefon
- **Slides:** lys tekst på mørkt er roligere i et dæmpet rum end mørk tekst på hvidt
- **Website-heroer:** en mørk hero får den første skærm til at føles bevidst. Se [baggrunde til website-heroer](https://gradiently.design/da/guide/website-hero-background)

De passer dårligere, hvor folk læser længe på papir, eller hvor et brand er bygget på dagslys, friskhed eller leg. Dér gør en bleg baggrund med én blød farve det samme arbejde.

## En mørk gradientbaggrund 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åsort baggrund med ét blåt lys øverst til højre, off-white brødtekst og hvide overskrifter. Tilføj et kornlag til sidst.

Designer du en hel brugerflade i mørk tilstand frem for én baggrund, så se [design til mørk tilstand](https://gradiently.design/da/guide/dark-mode-design). Mange Marks på Markedet er bygget på mørke baggrunde, og de gør plads til dine ord automatisk og flytter deres roligste område bag teksten.

## FAQ

### Hvordan får jeg en mørk gradientbaggrund til at se godt ud?

Brug et farvet næsten-sort i stedet for rent sort, tilføj én skævt placeret oplyst farve fra samme familie, og afslut med fint korn.

### Hvorfor har min mørke gradient striber?

Mørke blandinger spænder over meget få farveværdier, så trinene er brede og lette at se. Tilføj korn, udvid spændet, og eksportér i høj kvalitet.

### Hvilken tekstfarve virker på en mørk gradient?

Hvid til overskrifter og off-white som `#e5e7eb` til brødtekst, placeret i det mørkeste område. Tjek mindst 4,5:1 kontrast til brødtekst.

### Skal jeg bruge rent sort i en gradient?

Sjældent. Et næsten-sort med en let farvetone blander mere naturligt og giver gradienten dybde.

### Hvilke farver passer til en sort gradient?

Dyb violet, turkis, blå, glødende orange og rosa virker alle som én oplyst farve på en næsten-sort baggrund i samme farvefamilie.