# Drømmende gradienter: duggede pasteller og blødt lys

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

Drømmende gradienter ligner det tidlige lys gennem et gardin: bleget, duggent og en anelse varmt. Her er, hvad der får dem til at virke, otte koder at kopiere og det blæk, der kan læses på dem.

## The short version

- En drømmende gradient bruger blege farver med lav mætning, der ligger tæt sammen i nuance og er blandet uden hårde kanter.
- Den drømmende følelse kommer fra lyset: ét blødt, lyst område placeret ude fra midten, der toner ud i en duggen bund.
- Drømmende gradienter læses bedst med et dybt, farvet blæk som blomme eller skifer frem for hvid eller helt sort tekst.
- Blanding i OKLCH holder blege farver rene i midten, hvor en sRGB-blanding kan blive kridtet eller grå.
- Et fint korn forhindrer blege gradienter i at få bånd, når de komprimeres til sociale medier.

En **drømmende gradient** er en bleg, duggen blanding af farver, der ligger tæt sammen, lilla over i fersken, rødmen over i fløde, oplyst fra ét blødt punkt, så den ligner lys frem for maling. Tre ting får den til at virke: nuancer med lav mætning, kanter så bløde, at du ikke kan se, hvor en farve stopper, og en lys kerne placeret ude fra midten. Nedenfor er otte koder, du kan kopiere, en metode til at bygge din egen og det blæk, der holder ord læselige på noget så lyst.

## Hvad får en gradient til at se drømmende ud

Drømmende er en stemning, så det hjælper at navngive delene. En drømmende gradient er for det meste meget lys: næsten hver farve i den ville gå for hvid i et dunkelt rum. Nuancerne er naboer, så blandingen aldrig krydser gennem gråt. Og lyset har en retning. Ét område er lysere og varmere, som om solen lige var uden for billedet, og alt andet falder væk fra det ind i dis.

- Morgenfløde: #fdf6f0
- Rødmende slør: #fbe3e8
- Lilla dis: #efe1fb
- Pudderhimmel: #dde7fb
- Fersken-lys: #fde8d4
- Blommeblæk: #4a3352

Fem toner, der hører sammen, og ét dybt blæk. Tonerne har samme lyshed, så to af dem blander rent; blommen er til ord.

Sammenlign med en [pastelgradient](https://gradiently.design/da/guide/pastel-gradients), som kan være flad og munter, eller en [sløret gradient](https://gradiently.design/da/guide/blurry-gradient), som kan have en hvilken som helst farve. Drømmende ligger imellem: pastelfarver, sløret lys og lidt dis ovenpå.

## Koder til drømmende gradienter at kopiere

Hver af dem er én CSS-værdi. Radiale gradienter med en ellipse ude fra midten giver fornemmelsen af en lyskilde; de to lineære er til bannere og lange strimler, hvor en radial ville se skæv ud.

- Første lys: `radial-gradient(ellipse 90% 70% at 30% 25%, #fde8d4 0%, #fbe3e8 35%, #efe1fb 70%, #f6f2fb 100%)`
- Lillamorgen: `radial-gradient(ellipse 80% 80% at 70% 30%, #fbe3e8 0%, #efe1fb 45%, #dde7fb 100%)`
- Vinduesskær: `radial-gradient(ellipse 100% 70% at 50% 0%, #fff4e6 0%, #fde2e4 40%, #e9e3f7 100%)`
- Havtåge: `radial-gradient(ellipse 85% 75% at 25% 70%, #e0f2f1 0%, #e6e9fb 45%, #f5e9f7 100%)`
- Dis i den gyldne time: `radial-gradient(ellipse 90% 80% at 65% 60%, #fcefd8 0%, #f8dde0 40%, #e8dcef 80%, #dcd6ea 100%)`
- Perlemor: `linear-gradient(160deg in oklch, #f9e7ef 0%, #ece3fa 50%, #dfeafb 100%)`
- Skyernes skumring: `linear-gradient(180deg, #dfe6f7 0%, #ecdff3 45%, #fbe6dc 100%)`
- Måneskinslavendel: `radial-gradient(ellipse 80% 70% at 40% 35%, #f3e8ff 0%, #d9d3f2 45%, #b8b6dc 100%)`

Otte drømmende gradienter. Det dybeste stop i dem alle er stadig blegt, og det er det, der holder stemningen blød.

Måneskinslavendel er den eneste med en lidt dybere kant. Den passer til aftentemaer, søvnapps og vuggevise-playlister, hvor ren fløde ville føles for lys.

## Sådan bygger du din egen drømmende gradient

1. **Vælg en nuancefamilie** Vælg to eller tre nuancer, der ligger inden for omkring en kvart omgang af farvehjulet: pink, lilla og blå, eller fersken, rødmen og lilla. Modsætninger som fersken og blå mødes i gråt, hvilket er problemet beskrevet i [mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients).
2. **Hæv lysheden, sænk mætningen** Skub hver farve tæt på hvid. I OKLCH skal du sigte efter en lyshed omkring 0,92 til 0,96 og en kromatik under cirka 0,05. Farven skal være et hint, ikke en erklæring.
3. **Placér lyset** Læg det varmeste, lyseste stop i midten af en ellipse, og flyt midten væk fra midten, som regel til et hjørne foroven. Lys, der kommer fra et sted, er det, der gør bleg til drømmende.
4. **Stræk stoppene** Spred stoppene bredt, så intet bånd er smallere end en tredjedel af billedet. Stramme stop laver ringe, og ringe bryder disen.
5. **Tilføj et hvisk af korn** Et fint støjlag ved meget lav opacitet får overfladen til at føles som film eller papir og skjuler bånd. [Kornede gradienter](https://gradiently.design/da/guide/grainy-gradients) viser hvordan.

Bygget ud fra trinnene: `radial-gradient(ellipse 95% 75% at 28% 22%, oklch(0.97 0.03 60) 0%, oklch(0.94 0.04 10) 40%, oklch(0.92 0.045 300) 75%, oklch(0.93 0.035 260) 100%)`

Fersken-lys øverst til venstre, rødmen, så lilla og en svag blå yderst. Hvert stop er over 0,9 i lyshed.

## En drømmende gradientbaggrund i CSS

Én radial gradient giver ét lys. To eller tre, lagt oven på en bleg bund, giver den drivende, skyede kvalitet, folk mener med drømmende. Bland i OKLCH, så midten forbliver ren; [gradientinterpolation](https://gradiently.design/da/guide/gradient-interpolation) forklarer hvorfor.

```css
.dreamy {
  min-height: 100vh;
  background-color: #f6f2fb; /* fallback */
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 15% in oklch, #fde8d4 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 85% 35% in oklch, #efe1fb 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 100% in oklch, #dde7fb 0%, transparent 70%),
    linear-gradient(170deg, #fbf3f6 0%, #f3eefb 100%);
}
```

Tre bløde lys over en bleg bund: fersken øverst til venstre, lilla til højre, pudderblå stigende fra bunden.

> **Blege gradienter får bånd først** Meget lyse blandinger har få forskellige farveværdier mellem deres stop, så kraftig komprimering gør dem til synlige striber. Eksportér som PNG til opslag på sociale medier, og tilføj korn. [Gradient-bånddannelse](https://gradiently.design/da/guide/gradient-banding) gennemgår løsningerne.

## Sådan sætter du tekst på en drømmende gradient

Hvid tekst forsvinder på en drømmende gradient, og helt sort ser hårdt ud, som om nogen havde stemplet en formular ned i en akvarel. Svaret er et dybt blæk fra samme familie: blomme på en blanding af pink og lilla, skiferblå på en diset, et varmt brunt på fersken. Det læses tydeligt og føles stadig som en del af billedet.

### Undgå

- Hvid eller lysegrå skrift
- Helt sort i en tung vægt
- Den lyseste kerne bag overskriften
- Tynd skønskrift i små størrelser
- En boks eller glød bag ordene for at redde kontrasten

### Gør

- Et dybt, farvet blæk: blomme, skifer, kakao
- Almindelig eller medium vægt med rigelig afstand
- Ord placeret i den roligere, jævne del af disen
- En serif eller blød sans-serif i en selvsikker størrelse
- Kontrast tjekket der, hvor hver linje faktisk sidder

Et blegt, drømmende citatopslag, hvor gradientens lyseste del sidder bag teksten og vasker den ud

Den lyse kerne havner bag ordene, og linjen bliver svag.

Det samme drømmende citatopslag med et roligere område af gradienten bag teksten, som nu kan læses tydeligt

Det samme opslag med det rolige område bag ordene og et dybere blæk.

Det er her, Gradiently gør sig fortjent. En Mark ved, hvor ordene er: den flytter sit roligste område bag dem, uddyber farverne nær bogstaverne og vælger lyst eller mørkt blæk pr. linje fra sin egen palet, så en blød baggrund aldrig koster dig læselighed. For de generelle regler, læs [tekst på en gradient](https://gradiently.design/da/guide/text-on-gradient).

## Hvor drømmende gradienter virker

Drømmende læses som blidt, personligt og uhastet. Det gør det rigtigt for nogle brands og forkert for andre. En nedtælling til et tilbud i lilla dis føles forvirret; en hudplejelancering i den føles helt rigtig.

- **Wellness og hudpleje:** produktlanceringer, rutiner og citater, som regel som Instagram-opslag i 1080×1350.
- **Bryllupper og invitationer:** en invitation på 5×7 in i 1500×2100 med en fersken- og rødmen-vask og et navn i serif.
- **Musik og lyd:** et Spotify-canvas i 1080×1920 eller et Apple Podcasts-cover i 3000×3000 til rolige, søvn- eller ambientprogrammer.
- **Journaler og nyhedsbreve:** en Substack-opslagsheader i 1456×816, der slår en stille tone an før det første ord.
- **Telefonbaggrunde og stories:** bløde nok til at ligge bag ikoner eller klistermærker uden at kæmpe med dem.

Et kvadratisk podcastcover kaldet Nathaven på en blød drømmende baggrund i lavendel og fersken

Et podcastcover i 3000×3000. Drømmende farve fortæller en lytter, hvordan programmet føles, før de læser titlen.

Hvis drømmende er ved at blive dit brands udtryk frem for ét opslag, så overvej at gøre det til noget, ingen andre kan bruge. Hver Mark på Gradiently har én ejer ad gangen, så en dugget lilla, du sikrer dig, forbliver din, renderet frisk i hver størrelse, du designer i. For den bredere familie af bløde udtryk, se [aurora-gradienter](https://gradiently.design/da/guide/aurora-gradients).

## FAQ

### Hvilke farver giver en drømmende gradient?

Blege toner med lav mætning, der ligger tæt på hinanden på farvehjulet: rødmen, lilla, pudderblå, fersken og fløde. Hold hvert stop meget lyst.

### Hvad er forskellen på en pastel- og en drømmende gradient?

Pastel beskriver farverne. Drømmende tilføjer blødt, retningsbestemt lys og dis, så gradienten ser oplyst ud frem for flad.

### Hvilken tekstfarve virker på en drømmende gradient?

Et dybt blæk fra samme familie, som blomme, skiferblå eller kakao. Hvid forsvinder på blege baggrunde, og helt sort kan føles hårdt.

### Hvorfor har min drømmende gradient striber?

Blege blandinger har få farvetrin mellem stop, så komprimering viser dem som bånd. Eksportér som PNG, gør stoppene bredere, og tilføj et fint korn.

### Hvordan laver jeg en drømmende gradient i CSS?

Læg to eller tre radiale gradienter ude fra midten, der toner ud til gennemsigtig, oven på en bleg lineær bund, og bland dem `in oklch` for at holde midten ren.