# Stemningsfulde gradienter: mørke, rige koder med atmosfære

[Canonical HTML page](https://gradiently.design/da/guide/moody-gradients)

Mørkt er nemt. Atmosfære er sværere: den kommer fra, hvor lyset falder, hvor meget farve du holder tilbage, og hvad skyggerne er lavet af. Tolv koder og tankerne bag dem.

## The short version

- En stemningsfuld gradient er en mørk blanding, hvor det meste af billedet ligger i skygge, og farven kun viser sig, hvor lyset falder.
- Stemningsfulde gradienter bruger afdæmpede, let grålige farver frem for mættede, og derfor virker de filmiske i stedet for højrøstede.
- Skygger med et strejf af farve, som blåsort eller blommesort, virker rigere end ren sort.
- Ét varmt lys mod en kølig bund er den hurtigste måde at give en mørk gradient atmosfære.
- Mørke gradienter får mere banding end lyse, så tilføj lidt korn og eksportér som PNG eller video i høj kvalitet.

En **stemningsfuld gradient** er en mørk blanding, der opfører sig som et svagt oplyst rum: det meste af billedet ligger i skygge, ét område fanger lyset, og farverne holdes tilbage i stedet for at blive skruet op. Opskriften er enkel at beskrive. Start med en tonet næsten-sort, tilføj en eller to afdæmpede mellemtoner, og lad ét enkelt lys, ofte varmt mod en kølig bund, give overfladen liv. Nedenfor finder du tolv koder at kopiere, og derefter hvordan du bygger din egen og holder ord læsbare ovenpå.

## Hvad gør en gradient stemningsfuld og ikke bare mørk

Mange mørke gradienter føles flade. Marineblå, der toner over i sort, er mørk, men der er intet vejr i den. Stemning kommer fra nogle få beslutninger, som fotografer og farvekorrigerere på film træffer af instinkt, og du kan træffe dem med vilje.

- **Lav nøgle.** Omkring tre fjerdedele af billedet er skygge. Lyset er undtagelsen, ikke reglen.
- **Én lyskilde.** Lyset kommer ind fra et hjørne eller en kant, så øjet ved, hvor vinduet eller lampen er.
- **Tilbageholdt farve.** Mellemtonerne er let grålige. En støvet petrol føles mere stemningsfuld end en klar.
- **Farvede skygger.** Det mørkeste punkt er blåsort, grønsort eller oksblod, aldrig `#000000`.
- **Temperaturkontrast.** Et lille varmt lys i en kølig scene, eller omvendt, skaber spænding.

### Mørk, men flad

- Ren sort i den ene ende
- Klar, mættet accent
- Lys fordelt jævnt over billedet
- Lige diagonal fra hjørne til hjørne
- Helt glat digital overflade

### Stemningsfuld

- Tonet skygge, der stadig har en nuance
- Afdæmpet accent, let grålig
- Lys samlet ét sted
- Radial eller blødt vinklet udtoning
- Fint korn, som på film

## Tolv stemningsfulde gradientkoder

Hver af dem er én CSS-værdi, du kan indsætte i `background`. De er groft grupperet efter temperatur: først de kølige og stormfulde, så de varme med lampelys, og til sidst nogle midt imellem.

- Storm: `linear-gradient(160deg, #2c3a4a 0%, #1b2330 45%, #0d1117 100%)`
- Midnatspetrol: `radial-gradient(ellipse at 70% 30%, #1f5c63 0%, #0f2e36 45%, #050f14 90%)`
- Dybhav: `linear-gradient(200deg, #10314a 0%, #0a1a2f 50%, #04080f 100%)`
- Skov i skumringen: `linear-gradient(180deg, #2f4a3a 0%, #17291f 50%, #070d0a 100%)`
- Oksblod: `radial-gradient(circle at 30% 20%, #6b1d2a 0%, #3a0f18 45%, #120609 85%)`
- Sidste glød: `radial-gradient(circle at 80% 85%, #b4532a 0%, #4a1d12 35%, #120806 75%)`
- Levende lys: `radial-gradient(circle at 50% 100%, #8a4b22 0%, #3d2115 40%, #0f0a08 80%)`
- Gadelygte: `radial-gradient(circle at 20% 15%, #c98a3a 0%, #4b3220 30%, #14110f 70%)`
- Mørk blomme: `linear-gradient(135deg, #3b1f3f 0%, #241329 50%, #0e0710 100%)`
- Blæk og violet: `radial-gradient(circle at 75% 20%, #4c2a7a 0%, #1d1433 45%, #0a0812 85%)`
- Mos og bronze: `linear-gradient(150deg, #0c120d 0%, #2a3320 55%, #7a5a2e 100%)`
- Grafitrosa: `linear-gradient(170deg, #4a3438 0%, #2b2628 55%, #161214 100%)`

Tolv stemningsfulde gradienter. Læg mærke til, at ingen af dem ender i ren sort, og ingen bruger en fuldt mættet farve.

Vil du have noget, der minder mere om en klar nat end en stormfuld, går [nattehimmel-gradienter](https://gradiently.design/da/guide/night-sky-gradient) mere i blåt og tilføjer stjerner. Til dybere, mere blank farve med mere mætning ligger [ædelstensfarver](https://gradiently.design/da/guide/jewel-tone-colors) et trin lysere end noget her.

## En stemningsfuld farvepalet at bygge ud fra

Når du laver din egen, så arbejd ud fra en palet frem for to farver. Fem er rigeligt: en bund, to skyggetrin, én afdæmpet mellemtone og ét lys. Lyset er den eneste farve, der må have reel lysstyrke, og den bør kun fylde et lille område.

- Natbund: #0d1117
- Dyb skifer: #1b2330
- Storm: #2c3a4a
- Regngrå: #5b6b78
- Lamperav: #c98a3a

En kølig, regnfuld palet med ét varmt lys. Byt ravfarven ud med en støvet rosa eller en bleg natriumgul, og historien ændrer sig fuldstændigt.

Hvorfor varmt lys virker så godt mod kølig skygge, forklares i [farvetemperatur](https://gradiently.design/da/guide/color-temperature). Flere færdige sæt finder du i [mørke farvepaletter](https://gradiently.design/da/guide/dark-color-palettes).

## Sådan laver du en stemningsfuld gradient i CSS

1. **Vælg en tonet bund** Vælg en næsten-sort med en nuance i, som `#0b0d12` til blåsort eller `#120806` til varm brunsort. Brug den også som reserve i `background-color`.
2. **Tilføj skyggekroppen** Læg en blød lineær gradient mellem to mørke trin af samme nuance. Det giver billedet dybde, før noget lys kommer til.
3. **Placér ét lys** Tilføj en radial gradient i et hjørne, der toner ud til `transparent` ved omkring 40 procent. Hold farven afdæmpet og opaciteten et godt stykke under fuld.
4. **Tilføj et køligt modlys** Eventuelt en ekstra, større og svagere radial i det modsatte hjørne, i den kølige familie. Den forhindrer skyggesiden i at blive død.
5. **Afslut med korn** Et fint støjlag med lav opacitet skjuler banding og får overfladen til at føles som film. [Kornede gradienter](https://gradiently.design/da/guide/grainy-gradients) har koden.

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

Et gadelygteskær øverst til højre, en kølig petroldis nederst til venstre og en skiferfarvet krop. Tre lag, ingen billeder.

> **Mørke blandinger får banding** Med så lille et spænd mellem de mørkeste og lyseste værdier viser stemningsfulde gradienter trinvise bånd på mange skærme og efter komprimering. Korn, PNG-eksport og at undgå hård JPEG-komprimering hjælper alt sammen. [Banding i gradienter](https://gradiently.design/da/guide/gradient-banding) forklarer løsningen i detaljer.

## Tekst på en stemningsfuld baggrund

Lys tekst på en mørk bund læses godt, indtil den krydser den ene lyse pøl, du har arbejdet så hårdt på. Planlæg overskriften til skyggesiden, og hold lyset væk fra ordene i stedet for bag dem. En blød offwhite, som `#ece6dc`, sidder mere naturligt på en stemningsfuld bund end ren hvid, der kan virke hård.

En mørk lodret event-story, hvor baggrundens lyse område ligger bag overskriften Den sene forestilling

Baggrunden løber lige igennem ordene, så det lyseste område kan lande bag overskriften.

Den samme mørke event-story med en rolig skygge bag overskriften og skæret holdt ved én kant

Her flytter Mark sit roligste, mørkeste område bag teksten, og lyset bliver ved kanten.

Versionen til højre er det, en Gradiently Mark gør af sig selv: den ved, hvor ordene er, gør farven dybere tæt på bogstaverne og vælger lys eller mørk tekst for hver linje ud fra sin egen palet, uden ekstra bokse eller skygger. [Tekst på en gradient](https://gradiently.design/da/guide/text-on-gradient) viser den manuelle version.

## Hvor stemningsfulde gradienter fungerer bedst

| Brug | Prøv | Størrelse |
| --- | --- | --- |
| Story til sent event eller klubaften | Blæk og violet, Gadelygte | 1080×1920 |
| Podcastcover | Oksblod, Grafitrosa | 3000×3000 |
| Menuplakat til restaurant eller bar | Levende lys, Mos og bronze | A4, 2480×3508 |
| Hero på website for et studie eller bureau | Storm, Midnatspetrol | 1920×1080 |
| YouTube-thumbnail til en thriller eller et essay | Sidste glød, Dybhav | 1280×720 |
| Spotify-playlistecover | Skov i skumringen, Mørk blomme | 1080×1080 |

Stemningsfulde gradienter passer til alt, der foregår om natten, alt, der skal føles gennemtænkt, og alt, der skal lyttes til frem for at råbe.

De passer til nat, musik, drinks, film, parfume og stille luksus. De passer langt dårligere til en børnefødselsdag eller et sommerudsalg. Til en hel brugerflade i dette register dækker [mørke gradientbaggrunde](https://gradiently.design/da/guide/dark-gradient-backgrounds) den ekstra omhu, skærme kræver.

Hvis du hellere vil slippe for at finjustere lag i hånden, har Markedet levende Marks i præcis dette register, som du kan søge frem med ord som »dyb petrol« eller »oksblod«. Du kan designe med enhver Mark, som ingen har sikret sig, gratis, og når du sikrer dig en, betyder det, at ingen andens plakat får den samme atmosfære.

## FAQ

### Hvilke farver giver en stemningsfuld gradient?

Tonede næsten-sorte som blåsort eller blommesort, en eller to afdæmpede mellemtoner som støvet petrol eller skifer, og ét enkelt varmere lys som rav eller glød.

### Hvordan adskiller en stemningsfuld gradient sig fra en mørk gradient?

En mørk gradient skal bare være mørk. En stemningsfuld har en tydelig lyskilde, tilbageholdt farve og farvede skygger, som giver den atmosfære.

### Skal en stemningsfuld gradient bruge ren sort?

Normalt ikke. En næsten-sort med et strejf af nuance, som `#0b0d12`, ser rigere ud og glider blødere over i farverne omkring den.

### Hvorfor ser min mørke gradient stribet ud?

Det er banding, som viser sig mest i mørke, subtile blandinger. Tilføj fint korn, og eksportér som PNG eller video i høj kvalitet i stedet for en komprimeret JPEG.

### Hvilken tekstfarve fungerer på en stemningsfuld gradient?

En blød offwhite læses som regel bedst. Placér den over skyggesiden, væk fra det lyseste område, og tjek kontrasten, hvor hver linje står.