# Stämningsfulla gradienter: mörka, rika koder med atmosfär

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

Mörkt är enkelt. Atmosfär är svårare: den kommer av var ljuset faller, hur mycket färg du håller tillbaka och vad skuggorna är gjorda av. Tolv koder och resonemanget bakom dem.

## The short version

- En stämningsfull gradient är en mörk gradient där det mesta av bilden ligger i skugga och färgen syns bara där ljuset faller.
- Stämningsfulla gradienter använder dämpade, lätt gråtonade färger i stället för mättade, vilket är därför de känns filmiska och inte högljudda.
- Skuggor med en antydan av färg, som blåsvart eller plommonsvart, läses som rikare än rent svart.
- Ett varmt ljus mot en sval botten är det snabbaste sättet att ge en mörk gradient atmosfär.
- Mörka gradienter bandar mer än ljusa, så lägg till lite korn och exportera som PNG eller video i hög kvalitet.

En **stämningsfull gradient** är en mörk gradient som beter sig som ett svagt upplyst rum: det mesta av bilden ligger i skugga, en yta fångar ljuset och färgerna hålls tillbaka i stället för att skruvas upp. Receptet är enkelt att säga. Utgå från ett nyanserat nästan svart, lägg till en eller två dämpade mellantoner och låt ett enda ljus, ofta varmt mot en sval botten, väcka ytan till liv. Nedan finns tolv koder att kopiera, sedan hur du bygger din egen och håller orden läsbara ovanpå.

## Vad som gör en gradient stämningsfull, inte bara mörk

Många mörka gradienter känns platta. Marinblått som tonar mot svart är mörkt, men det har inget väder i sig. Stämning kommer av några beslut som fotografer och filmkolorister fattar på instinkt, och som du kan fatta med avsikt.

- **Lågnyckel.** Ungefär tre fjärdedelar av bilden är skugga. Ljuset är undantaget, inte regeln.
- **En källa.** Ljuset kommer in från ett hörn eller en kant, så ögat vet var fönstret eller lampan finns.
- **Återhållen färg.** Mellantonerna är lätt gråtonade. Ett dammigt blågrönt känns mer stämningsfullt än ett klart.
- **Färgade skuggor.** Den mörkaste punkten är blåsvart, grönsvart eller oxblod, aldrig `#000000`.
- **Temperaturkontrast.** Ett litet varmt ljus i en sval scen, eller tvärtom, skapar spänning.

### Mörk men platt

- Rent svart i ena änden
- Klar, mättad accent
- Ljus jämnt fördelat över bilden
- Rak diagonal, hörn till hörn
- Perfekt slät digital yta

### Stämningsfull

- Nyanserad skugga som ändå har en kulör
- Dämpad accent, lätt gråtonad
- Ljus samlat på ett ställe
- Radiell eller mjukt vinklad avtoning
- Fint korn, som film

## Tolv koder för stämningsfulla gradienter

Var och en av dessa är ett enda CSS-värde som du kan klistra in i `background`. De är löst grupperade efter temperatur: svala och stormiga först, sedan de varma, lampbelysta, sedan några däremellan.

- Storm: `linear-gradient(160deg, #2c3a4a 0%, #1b2330 45%, #0d1117 100%)`
- Midnattspetrol: `radial-gradient(ellipse at 70% 30%, #1f5c63 0%, #0f2e36 45%, #050f14 90%)`
- Djuphav: `linear-gradient(200deg, #10314a 0%, #0a1a2f 50%, #04080f 100%)`
- Skog i skymning: `linear-gradient(180deg, #2f4a3a 0%, #17291f 50%, #070d0a 100%)`
- Oxblod: `radial-gradient(circle at 30% 20%, #6b1d2a 0%, #3a0f18 45%, #120609 85%)`
- Sista glöden: `radial-gradient(circle at 80% 85%, #b4532a 0%, #4a1d12 35%, #120806 75%)`
- Levande ljus: `radial-gradient(circle at 50% 100%, #8a4b22 0%, #3d2115 40%, #0f0a08 80%)`
- Gatlykta: `radial-gradient(circle at 20% 15%, #c98a3a 0%, #4b3220 30%, #14110f 70%)`
- Blåslagen plommon: `linear-gradient(135deg, #3b1f3f 0%, #241329 50%, #0e0710 100%)`
- Bläck och violett: `radial-gradient(circle at 75% 20%, #4c2a7a 0%, #1d1433 45%, #0a0812 85%)`
- Mossa och brons: `linear-gradient(150deg, #0c120d 0%, #2a3320 55%, #7a5a2e 100%)`
- Grafitrosa: `linear-gradient(170deg, #4a3438 0%, #2b2628 55%, #161214 100%)`

Tolv stämningsfulla gradienter. Lägg märke till att ingen slutar i rent svart och ingen använder en helt mättad färg.

Vill du ha något närmare en klar natt än en stormig lutar [gradienter med nattsky](https://gradiently.design/sv/guide/night-sky-gradient) mer åt blått och lägger till stjärnor. För djupare, glansigare färg med mer mättnad ligger [juveltoner](https://gradiently.design/sv/guide/jewel-tone-colors) ett steg ljusare än något här.

## En stämningsfull färgpalett att bygga från

När du gör din egen, utgå från en palett snarare än två färger. Fem räcker gott: en botten, två skuggsteg, en dämpad mellanton och ett ljus. Ljuset är den enda färg som får ha verklig ljusstyrka, och det ska synas på en liten yta.

- Nattbotten: #0d1117
- Djup skiffer: #1b2330
- Storm: #2c3a4a
- Regngrått: #5b6b78
- Lampbärnsten: #c98a3a

En sval, regnig palett med ett varmt ljus. Byt bärnstenen mot dammigt rosa eller ett blekt natriumgult och berättelsen ändras helt.

Skälet till att varmt ljus fungerar så bra mot sval skugga förklaras i [färgtemperatur](https://gradiently.design/sv/guide/color-temperature). Fler färdiga uppsättningar finns i [mörka färgpaletter](https://gradiently.design/sv/guide/dark-color-palettes).

## Så gör du en stämningsfull gradient i CSS

1. **Sätt en nyanserad botten** Välj ett nästan svart med en kulör i, som `#0b0d12` för blåsvart eller `#120806` för varmt brunsvart. Använd det som reserv i `background-color` också.
2. **Lägg till skuggkroppen** Lägg en mild linjär gradient mellan två mörka steg av samma kulör. Det ger bilden djup innan något ljus kommer in.
3. **Placera ett ljus** Lägg till en radiell gradient i ett hörn som tonar ut till `transparent` vid ungefär 40 procent. Håll dess färg dämpad och dess opacitet långt under full.
4. **Lägg till ett svalt motljus** Eventuellt en andra, större och svagare radiell i motsatt hörn, i den svala familjen. Den hindrar skuggsidan från att dö.
5. **Avsluta med korn** Ett fint brusskikt med låg opacitet döljer bandning och får ytan att kännas som film. [Korniga gradienter](https://gradiently.design/sv/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%);
}
```

Ett gatlyktsljus uppe till höger, en sval blågrön dis nere till vänster och en skiffergrå kropp. Tre lager, inga bilder.

> **Mörka gradienter bandar** Med så litet spann mellan de mörkaste och ljusaste värdena visar stämningsfulla gradienter trappstegsband på många skärmar och efter komprimering. Korn, PNG-export och att undvika kraftiga JPEG-inställningar hjälper. [Bandning i gradienter](https://gradiently.design/sv/guide/gradient-banding) förklarar lösningen i detalj.

## Text på en stämningsfull bakgrund

Ljus text på mörk botten läses bra, tills den korsar den enda ljusa pöl du arbetat så hårt på. Planera rubriken för skuggsidan och håll ljuset borta från orden i stället för bakom dem. Ett mjukt off-white, som `#ece6dc`, sitter bekvämare på en stämningsfull botten än rent vitt, som kan se hårt ut.

En mörk stående eventstory där bakgrundens ljusa yta ligger bakom rubriken Sena visningen

Bakgrunden löper rakt genom orden, så den ljusaste ytan kan hamna bakom rubriken.

Samma mörka eventstory med en lugn skugga bakom rubriken och glöden hållen till en kant

Här flyttar Marken sin lugnaste, mörkaste yta bakom texten, och ljuset stannar vid kanten.

Den högra versionen är vad en Gradiently-Mark gör på egen hand: den vet var orden finns, fördjupar färgen nära bokstäverna och väljer ljus eller mörk text per rad ur sin egen palett, utan att lägga till rutor eller skuggor. [Text på en gradient](https://gradiently.design/sv/guide/text-on-gradient) tar upp den manuella versionen.

## Där stämningsfulla gradienter fungerar bäst

| Användning | Prova | Storlek |
| --- | --- | --- |
| Story för sent event eller klubbkväll | Bläck och violett, Gatlykta | 1080×1920 |
| Podcastomslag | Oxblod, Grafitrosa | 3000×3000 |
| Menyaffisch för restaurang eller bar | Levande ljus, Mossa och brons | A4, 2480×3508 |
| Webbplatsens hero för studio eller byrå | Storm, Midnattspetrol | 1920×1080 |
| YouTube-miniatyr för en thriller eller essä | Sista glöden, Djuphav | 1280×720 |
| Omslag för Spotify-spellista | Skog i skymning, Blåslagen plommon | 1080×1080 |

Stämningsfulla gradienter passar allt som händer på natten, allt som vill kännas genomtänkt och allt som ska lyssnas på snarare än ropas ut.

De passar natt, musik, dryck, film, parfym och stilla lyx. De passar ett barnkalas eller en sommarrea mycket sämre. För ett helt gränssnitt i det här registret tar [mörka gradientbakgrunder](https://gradiently.design/sv/guide/dark-gradient-backgrounds) upp den extra omsorg som skärmar kräver.

Vill du slippa finjustera lager för hand har Marknaden levande Marks i precis det här registret, som går att söka med ord som ”djupt blågrönt” eller ”oxblod”. Du kan designa med vilken ledig Mark som helst gratis, och när du säkrar en betyder det att ingen annans affisch bär samma atmosfär.

## FAQ

### Vilka färger gör en stämningsfull gradient?

Nyanserade nästan svarta toner som blåsvart eller plommonsvart, en eller två dämpade mellantoner som dammigt blågrönt eller skiffer, och ett enda varmare ljus som bärnsten eller glöd.

### Hur skiljer sig en stämningsfull gradient från en mörk gradient?

En mörk gradient behöver bara vara mörk. En stämningsfull har en tydlig ljuskälla, återhållen färg och färgade skuggor, som ger den atmosfär.

### Ska en stämningsfull gradient använda rent svart?

Oftast inte. Ett nästan svart med en antydan av kulör, som `#0b0d12`, ser rikare ut och går mjukare ihop med färgerna runt omkring.

### Varför ser min mörka gradient randig ut?

Det är bandning, som syns mest i mörka, subtila gradienter. Lägg till fint korn och exportera som PNG eller video i hög kvalitet i stället för en komprimerad JPEG.

### Vilken textfärg fungerar på en stämningsfull gradient?

Ett mjukt off-white läses oftast bäst. Placera det över skuggsidan, bort från den ljusaste ytan, och kontrollera kontrasten där varje rad ligger.