# Slørede gradienter: blød fokusfarve, der føles moderne

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

Slørede gradienter ligner farve set gennem matteret glas eller et objektiv ude af fokus. De er rolige, moderne og lette at lave dårligt. Her er metoden med tallene.

## The short version

- En sløret gradient laves ved at placere nogle få bløde farveformer på en bund og sløre dem, til der ikke er kanter tilbage.
- Slørede gradienter adskiller sig fra nordlysgradienter: nordlys er bånd af lys på en mørk himmel, mens en sløret gradient er diffus farve uden retning eller struktur.
- Sløringsradius bør være stor i forhold til lærredet, cirka 10 til 20 procent af dets korteste side, ellers læses formerne stadig som klatter.
- Tre til fire farver, der ligger tæt på hinanden på farvehjulet, slører rent; modsatte farver bliver grå, hvor de overlapper.
- Glat sløret farve får let striber, så et fint kornlag bør lægges ovenpå før eksport.

En **sløret gradient** er farve uden kanter: nogle få bløde former på en bund, sløret, til der kun er lys tilbage, der driver fra en farvetone over i den næste. Den ligner et fotografi taget gennem matteret glas eller et objektiv trukket ud af fokus på en oplyst by. Den blødhed er grunden til, at den passer til wellnessapps, musik, hudpleje, rolig teknologi og baggrunde. Metoden er enkel: former først, derefter masser af sløring, derefter korn. Detaljerne nedenfor er forskellen på drømmende og udtværet.

## Slørede gradienter versus nordlys- og mesh-gradienter

De tre bliver blandet sammen, fordi de alle ser bløde ud. De kommer fra forskellige idéer, og valget af den rigtige ændrer opgaven.

| Stil | Hvordan den ser ud | Bygget af |
| --- | --- | --- |
| Sløret gradient | Diffus farve uden retning, som blødt fokus | Former på en bund, kraftigt sløret |
| [Nordlysgradient](https://gradiently.design/da/guide/aurora-gradients) | Bånd eller gardiner af lys på en mørk himmel | Strakte striber med et tydeligt flow |
| [Mesh-gradient](https://gradiently.design/da/guide/mesh-gradients) | Bløde farvefelter forbundet i et gitter | Farvepunkter blandet hen over et net |
| Lineær gradient | En lige rampe fra én farve til en anden | Stop langs en linje |

En sløret gradient har ingen struktur at følge. Kan du se en retning eller en form, er det noget andet.

## Sådan laver du en sløret gradient

1. **Vælg en bund** En lys off-white til luftigt, et dybt blæk til glødende. Bunden fylder alle huller, formerne efterlader.
2. **Vælg tre eller fire nabofarver** Farver tæt på hinanden på hjulet, som pink, lilla og himmelblå, blander sig til rene mellemtoner. Læs [analoge farver](https://gradiently.design/da/guide/analogous-colors) for flere kombinationer.
3. **Tegn store, overlappende former** Tre til fem cirkler eller ovaler, der hver dækker en fjerdedel til halvdelen af lærredet. Lad nogle løbe ud over kanterne.
4. **Slør kraftigt** Anvend en gaussisk sløring på cirka 10 til 20 procent af lærredets korteste side. På et opslag, der er 1080 pixel bredt, er det omkring 110 til 220 pixel.
5. **Tilføj korn** Et fint støjlag ved 3 til 6 procent uigennemsigtighed skjuler striber og forhindrer, at resultatet ligner plastik.
6. **Tjek i telefonstørrelse** Gør det mindre. Hvis en form stadig har en synlig kant, så slør mere eller gør formen større.

## Farveopskrifter til slørede gradienter

Hver farveprøve tilnærmer det færdige udtryk i én gradient, så du kan kopiere den direkte ind i CSS eller bruge farverne som dine former. Elliptiske radiale gradienter med forskudte positioner kommer overraskende tæt på en ægte sløring.

- Morgendis: `radial-gradient(ellipse 90% 70% at 25% 30%, #fbcfe8 0%, #e9d5ff 35%, #bfdbfe 70%, #f8fafc 100%)`
- Ferskenblomst: `radial-gradient(ellipse 80% 90% at 70% 60%, #fde68a 0%, #fdba74 30%, #fda4af 60%, #fdf2f8 100%)`
- Mintetåge: `radial-gradient(ellipse 85% 75% at 35% 65%, #a7f3d0 0%, #99f6e4 30%, #bae6fd 65%, #f0f9ff 100%)`
- Natlig bokeh: `radial-gradient(ellipse 70% 80% at 65% 35%, #a78bfa 0%, #6366f1 30%, #1e1b4b 70%, #0b0a1a 100%)`
- Klublys: `radial-gradient(ellipse 90% 80% at 30% 70%, #fb7185 0%, #c026d3 35%, #3b0764 72%, #12051f 100%)`
- Hørsløring: `linear-gradient(160deg, #e7e5e4 0%, #d6d3d1 30%, #fcd9bd 60%, #f5f5f4 100%)`

Tre lyse og tre mørke. Lyse slørede føles luftige og redaktionelle; mørke slørede føles som lys set ude af fokus om natten.

Vælg familien efter det, der sidder ovenpå. Lyse slørede bærer mørk skrift godt og passer til hudpleje, papirvarer, wellness og redaktionelle forsider. Mørke slørede får lys skrift til at gløde og passer til natteliv, musik og sene events. En neutral sløring som hør fungerer som en rolig baggrund til produktfotos, hvor farven aldrig må konkurrere med genstanden. Flere bløde paletter finder du i [drømmende gradienter](https://gradiently.design/da/guide/dreamy-gradients).

## Hvor meget sløring en sløret gradient har brug for

De fleste slørede gradienter fejler ved ikke at være slørede nok. En form sløret med 30 pixel på et lærred på 1080 pixel er stadig en form med en blød kant, som læses som en klat. Udtrykket kræver, at sløringen er stor nok til, at du ikke kan se, hvor én form slutter.

| Lærred | Størrelse | Startsløring |
| --- | --- | --- |
| Instagram-opslag | 1080×1350 | 110 til 220 px |
| Story eller telefonbaggrund | 1080×1920 | 110 til 220 px |
| Website-hero | 1920×1080 | 110 til 220 px |
| YouTube-thumbnail | 1280×720 | 70 til 145 px |
| A4-plakat ved 300 dpi | 2480×3508 | 250 til 500 px |

Udgangspunkter ved 10 til 20 procent af den korteste side. Større former kræver mindre sløring; mindre kræver mere.

## En sløret gradient i CSS

På nettet har du to veje. Lagdelte radiale gradienter, der toner ud til gennemsigtig, er billige og gengives med det samme. Ægte slørede elementer ser blødere ud og kan drive, men koster mere at tegne. Til en statisk baggrund er lag som regel nok.

```css
/* Route 1: layered radial gradients, no filter */
.blurry {
  background-color: #f8fafc;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 25%, #fbcfe8 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 80% 30%, #e9d5ff 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 85%, #bfdbfe 0%, transparent 70%);
}

/* Route 2: real shapes, blurred */
.blurry-live {
  position: relative;
  overflow: hidden;
  background: #f8fafc;
}
.blurry-live .blob {
  position: absolute;
  width: 50vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.8;
}
.blurry-live .blob:nth-child(1) { background: #fbcfe8; left: -10vmax; top: -10vmax; }
.blurry-live .blob:nth-child(2) { background: #e9d5ff; right: -12vmax; top: 0; }
.blurry-live .blob:nth-child(3) { background: #bfdbfe; left: 20%; bottom: -20vmax; }
```

Vej 1 er en blød, statisk morgendis. Vej 2 bruger tre slørede cirkler, du kan flytte langsomt med transform.

Hvis du har brug for et matteret panel over en sløret baggrund frem for selve baggrunden, er det `backdrop-filter`, som er dækket i [CSS backdrop filter](https://gradiently.design/da/guide/css-blur-background).

## Hvorfor slørede gradienter ser billige ud, og løsningen

### Udtværet

- Former, der stadig er synlige som bløde klatter
- Komplementærfarver, der bliver grå i overlappet
- Jævn, centreret komposition
- Fuldstændig glat, med striber i overgangene
- Ord placeret over det mest mættede område

### Drømmende

- Sløring så bred, at ingen kant overlever
- Nabofarver, der blander sig til rene mellemtoner
- Én dominerende farvemasse, forskudt fra midten
- Fint korn over det hele
- Ord på det lyseste eller dybeste område

Striber er den, der får alle, fordi en sløring skaber lange, bløde overgange over mange pixel. Lidt korn løser det; [gradient banding](https://gradiently.design/da/guide/gradient-banding) forklarer hvorfor. Og hvis to af dine farver mødes i grå, så byt den ene ud med en nabo, som beskrevet i [mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients).

En lodret story med ordene Træk vejret ind på en blød, lys, sløret lyserød og lilla baggrund

En story i 1080×1920 til en meditationsapp. Blød farve, korte ord, intet med en kant.

Gradiently Marks inkluderer bløde, diffuse materialer med indbygget korn, og de holder området bag dine ord roligt, så et sløret udtryk aldrig sluger overskriften. Du kan designe gratis i Studio med enhver Mark, der ikke er sikret.

## FAQ

### Hvordan laver jeg en sløret gradient?

Placér tre til fem store former i nabofarver på en almindelig bund, anvend en kraftig gaussisk sløring på omkring 10 til 20 procent af lærredets korteste side, og læg derefter et let kornlag på.

### Hvad er forskellen på en sløret gradient og en nordlysgradient?

En nordlysgradient har bånd af lys med et tydeligt flow, som regel på en mørk himmel. En sløret gradient er diffus farve uden retning eller synlig struktur.

### Kan jeg lave en sløret gradient kun med CSS?

Ja. Læg flere radiale gradienter, der toner ud til gennemsigtig, over hinanden, eller slør absolut placerede cirkler med `filter: blur()`.

### Hvorfor ser min slørede gradient stribet ud?

Lange, bløde overgange har få forskellige farvetrin, så de viser striber. Tilføj fint korn, og eksportér PNG frem for komprimeret JPEG.