# Stemningsfulle gradienter: mørke farger med dybde

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

Mørke er enkelt. Stemning krever mer: Den kommer fra hvor lyset faller, hvor mye du demper fargene, og hva skyggene består av. Tolv koder og tankene bak dem.

## The short version

- En stemningsfull gradient er en mørk blanding der det meste ligger i skygge, og fargen bare viser seg der lyset faller.
- Stemningsfulle gradienter bruker dempede, litt grålige farger fremfor mettede, og får derfor et filmaktig uttrykk uten å rope.
- Skygger med et hint av farge, som blåsvart eller plommesvart, virker rikere enn rent svart.
- Ett varmt lys mot en kjølig bunn er den raskeste veien til stemning i en mørk gradient.
- Mørke gradienter får lettere synlige fargebånd enn lyse. Legg til litt korn og eksporter som PNG eller video med høy kvalitet.

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.

### Mørkt, men flatt

- Rent svart i den ene enden
- Klar, mettet aksent
- Lys fordelt jevnt over bildet
- Rett diagonal fra hjørne til hjørne
- Helt glatt digital flate

### Stemningsfullt

- Farget skygge som beholder en nyanse
- Dempet, litt grålig aksent
- Lys samlet på ett sted
- Radialt eller mykt skrått lysfall
- Fint korn, som på film

## 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.

- Storm: `linear-gradient(160deg, #2c3a4a 0%, #1b2330 45%, #0d1117 100%)`
- Midnattspetrol: `radial-gradient(ellipse at 70% 30%, #1f5c63 0%, #0f2e36 45%, #050f14 90%)`
- Dypt hav: `linear-gradient(200deg, #10314a 0%, #0a1a2f 50%, #04080f 100%)`
- Skog i skumring: `linear-gradient(180deg, #2f4a3a 0%, #17291f 50%, #070d0a 100%)`
- Okseblod: `radial-gradient(circle at 30% 20%, #6b1d2a 0%, #3a0f18 45%, #120609 85%)`
- Siste glør: `radial-gradient(circle at 80% 85%, #b4532a 0%, #4a1d12 35%, #120806 75%)`
- Stearinlys: `radial-gradient(circle at 50% 100%, #8a4b22 0%, #3d2115 40%, #0f0a08 80%)`
- Gatelykt: `radial-gradient(circle at 20% 15%, #c98a3a 0%, #4b3220 30%, #14110f 70%)`
- Mørk plomme: `linear-gradient(135deg, #3b1f3f 0%, #241329 50%, #0e0710 100%)`
- Blekk og fiolett: `radial-gradient(circle at 75% 20%, #4c2a7a 0%, #1d1433 45%, #0a0812 85%)`
- Mose og bronse: `linear-gradient(150deg, #0c120d 0%, #2a3320 55%, #7a5a2e 100%)`
- Grafittrosa: `linear-gradient(170deg, #4a3438 0%, #2b2628 55%, #161214 100%)`

Tolv stemningsfulle gradienter. Legg merke til at ingen ender i rent svart, og ingen bruker en helt mettet farge.

Vil du ha noe nærmere en klar natt enn en stormfull, er [nattehimmelgradienter](https://gradiently.design/nb/guide/night-sky-gradient) blåere og har stjerner. For dypere, blankere og mer mettet farge ligger [juvelfarger](https://gradiently.design/nb/guide/jewel-tone-colors) 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.

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

En kjølig, regnfull palett med ett varmt lys. Bytt ravfargen med støvet rosa eller blek natriumgul, og stemningen endrer seg helt.

Hvorfor varmt lys fungerer så godt mot kjølig skygge, forklares i [fargetemperatur](https://gradiently.design/nb/guide/color-temperature). Se [mørke fargepaletter](https://gradiently.design/nb/guide/dark-color-palettes) for flere ferdige kombinasjoner.

## Slik lager du en stemningsfull gradient i CSS

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. **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. **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. **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. **Avslutt med korn** Et fint støylag med lav opasitet skjuler fargebånd og gir flaten et filmpreg. [Kornete gradienter](https://gradiently.design/nb/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 gatelyktskjær øverst til høyre, kjølig blågrønn dis nederst til venstre og en skiferfarget bunn. Tre lag, ingen bilder.

> **Mørke blandinger får fargebånd** Med så liten forskjell mellom de mørkeste og lyseste verdiene viser stemningsfulle gradienter trinnvise bånd på mange skjermer og etter komprimering. Korn, PNG-eksport og å unngå hard JPEG-komprimering hjelper. [Fargebånd i gradienter](https://gradiently.design/nb/guide/gradient-banding) forklarer løsningen i detalj.

## 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.

En mørk, stående arrangementsstory der bakgrunnens lyse område ligger bak overskriften Senforestilling

Bakgrunnen fortsetter rett gjennom ordene, så det lyseste området kan havne bak overskriften.

Den samme mørke arrangementsstoryen med en rolig skygge bak overskriften og lysskjæret langs én kant

Her flytter Marken sitt roligste, mørkeste område bak teksten, og lyset blir værende ved kanten.

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](https://gradiently.design/nb/guide/text-on-gradient) forklarer hvordan du gjør det manuelt.

## Hvor stemningsfulle gradienter fungerer best

| Bruk | Prøv | Størrelse |
| --- | --- | --- |
| Story til et sent arrangement eller en klubbkveld | Blekk og fiolett, Gatelykt | 1080×1920 |
| Podkastomslag | Okseblod, Grafittrosa | 3000×3000 |
| Menyplakat til restaurant eller bar | Stearinlys, Mose og bronse | A4, 2480×3508 |
| Toppbilde på nettstedet til et studio eller byrå | Storm, Midnattspetrol | 1920×1080 |
| YouTube-miniatyrbilde til en thriller eller et essay | Siste glør, Dypt hav | 1280×720 |
| Omslag til Spotify-spilleliste | Skog i skumring, Mørk plomme | 1080×1080 |

Stemningsfulle gradienter passer til det som skjer om natten, det som skal føles gjennomtenkt, og det som skal lyttes til fremfor å ropes ut.

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](https://gradiently.design/nb/guide/dark-gradient-backgrounds) 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.

## FAQ

### Hvilke farger gir en stemningsfull gradient?

Fargede nesten-svarte nyanser som blåsvart eller plommesvart, én eller to dempede mellomtoner som støvet blågrønn eller skifer, og ett varmere lys som rav eller glør.

### Hvordan skiller en stemningsfull gradient seg fra en mørk?

En mørk gradient trenger bare å være mørk. En stemningsfull gradient har en tydelig lyskilde, dempede farger og fargede skygger som gir den atmosfære.

### Bør en stemningsfull gradient bruke rent svart?

Vanligvis ikke. En nesten-svart med et hint av farge, som `#0b0d12`, virker rikere og glir mykere over i fargene rundt.

### Hvorfor ser den mørke gradienten min stripete ut?

Det er fargebånd, som synes mest i mørke, forsiktige blandinger. Legg til fint korn og eksporter som PNG eller video med høy kvalitet fremfor en komprimert JPEG.

### Hvilken tekstfarge fungerer på en stemningsfull gradient?

En myk, brukket hvit er vanligvis lettest å lese. Plasser den på skyggesiden, unna det lyseste området, og kontroller kontrasten der hver linje står.