# Slørede baggrunde: blødt fokus gjort rigtigt

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

Sløring skubber en baggrund tilbage, så motivet eller ordene træder frem. For lidt ligner et uheld, og for meget det forkerte sted ser billigt ud. Sådan vurderer du det.

## The short version

- En sløret baggrund fjerner detaljer, så motivet eller teksten foran den bliver det klare omdrejningspunkt.
- Sløring virker bedst, når den enten er subtil som et objektivs lave dybdeskarphed eller kraftig nok til at gøre baggrunden til blød farve, og ligner et uheld midt imellem.
- Et kraftigt sløret foto bliver til en gradient af sine egne farver, hvilket hurtigt giver en baggrund, der passer til et billede.
- Slørede billeder viser ofte striber og falmede kanter, som lidt korn og en let forstørrelse retter op på.
- En gradient bygget af fotoets farver, et mørkt lag eller et fast panel kan gøre samme arbejde som sløring med mere kontrol.

En **sløret baggrund** tager detaljer væk, så noget andet kan føre an: et ansigt i et portræt, et produkt på et butiksfoto, en overskrift på et opslag, et panel i en grænseflade. Sløring virker, fordi øjet går efter det, der er skarpest. Kunsten er mængden. Lidt sløring ligner et objektiv, meget gør baggrunden til blød farve, og midterzonen ligner som regel et kamera, der ramte ved siden af fokus.

## Når en sløret baggrund hjælper

- **At adskille et motiv.** Portrætter og produktbilleder læses tydeligere, når baggrunden er blød, som med et objektiv på stor blænde.
- **At give plads til ord.** Tekst over et sløret foto er lettere at læse end tekst over et skarpt, detaljeret et.
- **At fylde et format.** Et landskabsfoto i en lodret story har brug for noget over og under sig. En sløret, forstørret kopi af samme foto fylder pladsen i matchende farve.
- **Grænseflader i lag.** Paneler af matteret glas slører det, der ligger bag dem, så panelet læses som et selvstændigt lag, mens det antyder indholdet nedenunder.
- **Privatliv i videoopkald.** Videoopkaldsapps slører rummet bag dig, så opmærksomheden bliver på dit ansigt.

- Foto 1200×900 (4:3): 1200 × 900
- Story 1080×1920: 1080 × 1920

Et 4:3-foto i en story efterlader store tomme bånd. En sløret, forstørret kopi af fotoet bag det fylder dem i fotoets egne farver.

## Hvor meget sløring skal du bruge

| Styrke | Sådan ser det ud | Brug det til |
| --- | --- | --- |
| Let | Baggrunden kan genkendes, blødt ude af fokus | Portrætter, produktbilleder, naturlig dybde |
| Middel | Former udtværede, men stadig genkendelige | Sjældent: ligner let en fokusfejl |
| Kraftig | Formerne er væk, kun bløde farvefelter tilbage | Bag tekst, formatfyld, stemningsbaggrunde |

Vælg let eller kraftig. Midten er der, hvor sløring ser utilsigtet ud.

Sløringens styrke er relativ til billedets størrelse: den samme radius, der knapt nok blødgør et foto på 4.000 pixel, opløser et på 600 pixel. Bedøm det med øjet i den størrelse, folk kommer til at se det. Til tekstbaggrunde skal du gå så kraftigt til værks, at der ikke er kanter tilbage bag bogstaverne, for halvslørede former konkurrerer stadig med ordene. [Tekst over billeder](https://gradiently.design/da/guide/text-over-image) forklarer hvorfor.

## Et sløret foto er en gradient i forklædning

Slør et foto kraftigt, og det, der er tilbage, er dets farve, bredt ud i bløde felter: en solnedgang bliver til en overgang fra orange til violet, en skov bliver til dybe grønne toner med en bleg himmel øverst. Derfor er slørede fotos så naturlige baggrunde til de billeder, de stammer fra. Det er også et vink: du kunne bygge den gradient direkte og få samme harmoni, skarpere kontrol og ingen kompressionsartefakter.

- Et solnedgangsfoto, helt sløret: `linear-gradient(180deg, #312e81, #9d174d 45%, #f97316 75%, #fde68a)`
- Et skovfoto, helt sløret: `linear-gradient(180deg, #e0f2fe, #86efac 35%, #166534 70%, #052e16)`
- Et bord i levende lys, helt sløret: `radial-gradient(ellipse at 50% 40%, #fcd34d, #b45309 45%, #1c1917 85%)`

Det, kraftig sløring efterlader: fotoets palet som gradient. Bygger du dem direkte, bliver resultatet renere.

For at trække paletten ud af et foto, se [farvepalet fra et billede](https://gradiently.design/da/guide/color-palette-from-image). I Gradiently gør [Match et billede](/forge/match) det i ét trin: slip et billede, og du får dets palet og de nærmeste Marks eller nye, lavet i dets billede.

## Sådan retter du de sædvanlige sløringsproblemer

1. **Forstør for at skjule falmede kanter** Sløring trækker gennemsigtighed eller mørke pixels ind fra uden for billedet, så kanterne bliver blege eller grå. Skalér den slørede kopi lidt op ud over rammen, så de bløde kanter beskæres væk.
2. **Læg korn på for at stoppe striber** Et kraftigt sløret billede er en række langsomme, glatte overgange, som får striber, når de gemmes som 8-bit JPEG eller PNG. Et let kornlag skjuler trinene. Se [gradientstriber](https://gradiently.design/da/guide/gradient-banding).
3. **Mørkn eller lysn til tekst** Sløring fjerner detaljer, men ikke lysstyrke. Hvis teksten stadig kæmper, så læg et mørkt eller lyst lag over sløringen, indtil kontrasten holder.
4. **Hold mætningen levende** Sløring blander farverne sammen til et gennemsnit, og det kan dæmpe dem. Et lille løft i mætningen efter sløringen bringer farven tilbage.

## Slørede baggrunde i CSS

På nettet er der to værktøjer. `filter: blur()` slører et element, hvilket passer til en sløret kopi af et billede bag det rigtige. `backdrop-filter: blur()` slører det, der ligger bag et element, og det giver paneler af matteret glas. Begge koster tegnetid, og `backdrop-filter` over rullende indhold koster mest. Se [CSS-gradienters ydeevne](https://gradiently.design/da/guide/css-gradient-performance).

```css
/* a blurred, enlarged copy of the cover image fills the frame */
.cover {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cover-image) center / cover;
  filter: blur(40px) saturate(1.2);
  transform: scale(1.15); /* crops the faded edges */
}

/* a frosted glass panel */
.panel {
  background: rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
```

Sæt `--cover-image` til billedets `url()` på elementet. Skaleringen skjuler de blege kanter, som sløring skaber.

Matterede paneler over farverige baggrunde er grundlaget for [glassmorphism](https://gradiently.design/da/guide/glassmorphism), som har sine egne regler for kontrast og kanter.

## Alternativer til sløring

### Sløring

- Bevarer automatisk fotoets farver
- Kan give striber, falme ved kanterne og dæmpe farven
- Varierer stadig i lysstyrke bag tekst
- Koster tegnetid, når den kører live på nettet

### En designet gradient

- Bruger fotoets palet, valgt med vilje
- Ren, med korn lagt på, hvor der er brug for det
- Et roligt, jævnt område placeret præcis bag teksten
- Nogle få bytes CSS eller en skarp eksport

Et mørkt lag, et fast panel bag ordene eller en [duotone](https://gradiently.design/da/guide/duotone-effect)-behandling af fotoet er de andre almindelige valg. Sløring er hurtigst. En designet baggrund er som regel den, du har mest kontrol over.

## FAQ

### Hvornår skal jeg bruge en sløret baggrund?

Når noget foran skal føre an: et motiv i et foto, ord på et opslag, et panel i en grænseflade eller et foto placeret i et format, det ikke fylder.

### Hvor meget skal jeg sløre en baggrund?

Enten let, så det ligner naturlig dybdeskarphed, eller kraftigt, så kun blød farve er tilbage. Middel sløring ligner let en fokusfejl.

### Hvorfor har min slørede baggrund grå kanter?

Sløring trækker tomme eller mørke pixels ind fra uden for billedet. Forstør det slørede lag lidt ud over rammen, så kanterne beskæres.

### Hvorfor ser min slørede baggrund trinvis ud?

Glatte, langsomme overgange får striber, når de gemmes i 8-bit-formater. Læg et svagt kornlag på, før du eksporterer.

### Hvordan slører jeg en baggrund i CSS?

Brug `filter: blur()` på en kopi af billedet bag indholdet eller `backdrop-filter: blur()` på et panel for at sløre det, der ligger bag det.