# Backdrop filter i CSS: frosted glass, der forbliver hurtigt

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

Frosted glass tager tre linjer CSS og kan stadig få en god telefon til at hakke. Her er koden, hvad det koster at tegne, og de reserver, der holder ord læselige, når sløringen aldrig dukker op.

## The short version

- CSS backdrop filter anvender effekter som slør på området bag et element, ikke på selve elementet.
- Et element skal have en delvist gennemsigtig baggrund, for at et backdrop filter kan ses. På en ensfarvet baggrund er effekten skjult.
- Sløringens pris vokser med sløringsradius og størrelsen på det slørede område, og den betales igen, hver gang indholdet bag det bevæger sig.
- Safari krævede præfikset -webkit-backdrop-filter indtil version 18, så det er stadig det sikre valg at levere begge linjer.
- En god reserve er en mere uigennemsigtig baggrund i en @supports-forespørgsel, så tekst kan læses, når sløringen mangler.

Et **backdrop filter** i CSS anvender en grafisk effekt, som regel slør, på det, der ligger bag et element. Skriv `backdrop-filter: blur(12px)` på et element med en delvist gennemsigtig baggrund, og siden under det bliver blødere. Det er frosted glass-udtrykket, der bruges på navigationsbjælker, sheets og kort. Det understøttes i alle nuværende browsere. Håndværket ligger i at holde det slørede område småt, radius beskeden og reserven læselig.

## Den grundlæggende frosted glass-opskrift

Tre ting laver glas: en gennemskinnelig fyldning, så baggrunden kan ses, selve sløringen og en svag kant, så panelet har en form. De fleste tilføjer også et lille løft i mætning, fordi sløring udjævner farver og efterlader dem grålere, end man venter.

```css
.glass {
  background: rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 16px;
}
```

Et lyst glaspanel til en mørk eller farverig side. Hold den præfikserede linje først, så den standardiserede egenskab vinder, hvor begge forstås.

Glas ligner kun glas, når der er noget, der er værd at sløre, bag det. På en flad grå side ser panelet bare dunkelt ud. Læg det over et fotografi eller en rig gradient, som [glassmorphism](https://gradiently.design/da/guide/glassmorphism) forklarer mere dybdegående.

Glød og violet på midnat: `radial-gradient(circle at 20% 25%, #f97316 0%, transparent 40%), radial-gradient(circle at 80% 70%, #7c3aed 0%, transparent 45%), linear-gradient(160deg, #0f172a 0%, #1e1b4b 100%)`

En baggrund med tydelige farveflader. Sløring gør fladerne til blødt lys bag panelet, som er hele pointen med effekten.

## Hvad backdrop-filter-funktioner kan

Egenskaben tager imod de samme funktioner som `filter`, og du kan kæde dem i én deklaration. De anvendes i rækkefølge, fra venstre mod højre, så `blur()` og derefter `saturate()` opfører sig anderledes end omvendt. Den fulde liste findes på [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter).

| Funktion | Eksempel | Godt til |
| --- | --- | --- |
| `blur()` | `blur(12px)` | Frosted glass, fokus bag en dialog |
| `saturate()` | `saturate(160%)` | At give farve tilbage, efter sløring har gjort den grå |
| `brightness()` | `brightness(0.7)` | At gøre et travlt område mørkere bag lys tekst |
| `contrast()` | `contrast(0.8)` | At berolige et uroligt foto under et panel |
| `grayscale()` | `grayscale(1)` | At dæmpe siden bag en modal |
| `none` | `none` | At slå effekten fra i en reserve eller media query |

De funktioner, du faktisk kommer til at bruge. `brightness()` under 1 er ofte et bedre læsbarhedsværktøj end kraftigere sløring.

## Ydeevne for backdrop filter

Sløring er en af de dyrere ting, en browser tegner. For at sløre et område skal den læse hver pixel bag elementet, sample naboerne ud til sløringsradius og sammensætte resultatet, og den gentager arbejdet, hver gang noget bag panelet ændrer sig. En fastgjort header over en side, der ruller, tegner sin sløring forfra i hver frame af rulningen.

Prisen skalerer med to tal, du styrer: elementets areal og radius. En header på 64 pixels slørede ved 12px er billig på næsten alt. Et overlay i fuld skærm slørede ved 40px over en video kan tabe frames på en mellemklassetelefon. Det bredere billede står i [CSS gradient-ydeevne](https://gradiently.design/da/guide/css-gradient-performance).

### Langsomt

- At sløre hele visningsområdet bag en modal
- Radier på 30px og derover
- At animere sløringsradius ved åbning og lukning
- Glaspaneler indlejret i glaspaneler
- Sløring over autoafspillende video

### Hurtigt

- Kun at sløre den bjælke, det kort eller det sheet, der har brug for det
- Radier mellem 8px og 20px
- At tone panelets opacitet ind med fast sløring
- Ét glaslag, ensfarvede fyldninger indeni
- Sløring over stillbilleder og gradienter

> **Mål på en rigtig telefon** Åbn panelet Rendering i Chromes udviklerværktøjer, slå paint flashing til, og rul. Blinker glasset i hver frame, og viser panelet Performance tabte frames, så gør arealet eller radius mindre, før du gør andet.

## Hvorfor backdrop-filter ikke virker

Når sløringen ser ud til at gøre ingenting, er årsagen næsten altid en af en kort liste.

1. **Tjek, at baggrunden er gennemsigtig** En ensfarvet `background: #fff` dækker den slørede baggrund helt. Brug en alfaværdi som `rgb(255 255 255 / 0.15)`.
2. **Tilføj Safari-præfikset** Safari accepterer først den uprefikserede egenskab fra version 18. Ældre iPhones har stadig brug for `-webkit-backdrop-filter`.
3. **Led efter en backdrop root over det** En forælder med `filter`, `opacity` under 1, en maske eller sit eget backdrop filter begrænser, hvad barnet kan se. Barnet slører så kun den forælder, hvilket ofte ligner slet ingen sløring.
4. **Pas på fastgjorte børn** Ligesom `filter` gør et backdrop filter elementet til den indeholdende blok for fastgjorte og absolut positionerede børn. En fastgjort menu i en glasheader placerer sig i forhold til headeren, ikke vinduet.
5. **Sørg for, at der er noget bag det** Sløring over en flad farve er usynlig. Rul panelet hen over et billede for at bekræfte, at det virker.

## En reserve, der holder teksten læselig

Gennemskinnelige paneler er designet omkring sløringen. Uden den efterlader en hvid fyldning på 14 procent over et travlt foto teksten siddende på selve fotoet, og kontrasten kollapser. Skriv den læselige version først, og opgrader den, hvor browseren kan sløre.

```css
/* Works everywhere: opaque enough to read on its own */
.glass {
  background: rgb(15 23 42 / 0.86);
  color: #f8fafc;
}

/* Upgrade where blur is available */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgb(15 23 42 / 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

/* Respect people who ask for less transparency, where supported */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgb(15 23 42 / 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
```

Progressiv forbedring til glas. Understøttelsen af `prefers-reduced-transparency` er stadig begrænset, så se den blok som en høflighed, ikke en garanti.

Tjek kontrasten mod det værste sted bag panelet, ikke gennemsnittet. En hvid overskrift over glas, der driver hen over en lys himmel, kan falde langt under forholdene i [farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility). At gøre mørkere med `brightness(0.7)` løser det som regel mere pålideligt end at sløre hårdere.

## Når du slet ikke har brug for sløring

Meget frosted glass findes kun for at gøre ord læselige over en travl baggrund. Er baggrunden din at designe, løser en roligere den problemet uden renderingspris. En blød gradient med lav kontrast bag et hero behøver intet panel. Se [hero-baggrunde til hjemmesider](https://gradiently.design/da/guide/website-hero-background) og [slørede baggrunde](https://gradiently.design/da/guide/blurred-background), hvor sløringen bages ind i billedet én gang i stedet for at blive beregnet i hver frame.

Et bredt website-hero med en overskrift hen over den klareste del af en farverig gradient

Ord direkte over en livlig baggrund: her rækker folk ud efter et glaspanel.

Samme website-hero, hvor gradienten bliver mørkere og roligere bag overskriften

Den samme baggrund, der beroliger sig selv bag ordene, uden panel, skygge eller sløring.

Den anden tilgang er, hvordan Gradiently håndterer læsbarhed: en Mark ved, hvor ordene er, og flytter sit roligste område med bedst kontrast bag dem, så du aldrig har brug for en boks eller en sløring til at redde en overskrift.

## FAQ

### Hvad er forskellen på filter og backdrop-filter?

`filter` ændrer elementet og dets indhold. `backdrop-filter` ændrer kun det, der er synligt bag elementet, gennem dets gennemsigtige baggrund.

### Hvorfor vises min backdrop-filter-sløring ikke?

Som regel er elementets baggrund helt uigennemsigtig, Safari kræver præfikset `-webkit-`, eller en forælder med `filter`, `opacity` eller en maske begrænser, hvad elementet kan se.

### Er backdrop-filter dårligt for ydeevnen?

Det kan være. Prisen vokser med det slørede areal og radius og betales igen, hver gang indholdet bagved bevæger sig, så hold glaspaneler små og radier beskedne.

### Har jeg stadig brug for -webkit-backdrop-filter?

Safari accepterer den uprefikserede egenskab fra version 18, men ældre iPhones er stadig i brug, så det er stadig fornuftigt at levere begge linjer.

### Hvilken sløringsværdi ser bedst ud til frosted glass?

Mellem 8px og 20px passer til de fleste brugerflader. Tilføj `saturate()` over 100% for at give den farve tilbage, som sløring tager væk.