# Backdrop-filter i CSS: frostet glass som holder seg raskt

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

Frostet glass tar tre linjer CSS og kan likevel få en god telefon til å hakke. Her er koden, kostnaden ved å tegne den og reservene som holder ordene lesbare når uskarpheten uteblir.

## The short version

- Backdrop-filter i CSS legger effekter som uskarphet på området bak et element, ikke på selve elementet.
- Et element trenger en delvis gjennomsiktig bakgrunn for at backdrop-filter skal synes. En ensfarget, ugjennomsiktig bakgrunn skjuler effekten.
- Kostnaden ved uskarphet vokser med radiusen og størrelsen på området, og påløper igjen hver gang innholdet bak beveger seg.
- Safari trengte prefikset -webkit-backdrop-filter frem til versjon 18, så det er fortsatt tryggest å levere begge linjene.
- En god reserve er en mer ugjennomsiktig bakgrunn i en @supports-spørring, så teksten forblir lesbar uten uskarphet.

**Backdrop-filter** i CSS legger en grafisk effekt, vanligvis uskarphet, på det som ligger bak et element. Skriv `backdrop-filter: blur(12px)` på et element med delvis gjennomsiktig bakgrunn, så myknes siden under. Det gir uttrykket av frostet glass som brukes i navigasjonsfelt, paneler og kort. Alle nåværende nettlesere støtter det. Håndverket ligger i å holde området lite, radiusen moderat og reserven lesbar.

## Grunnoppskriften på frostet glass

Tre ting skaper glass: en gjennomskinnelig flate som viser bakgrunnen, selve uskarpheten og en svak kant som gir panelet form. De fleste øker også metningen litt, fordi uskarphet jevner ut fargene og gjør dem gråere enn forventet.

```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 glasspanel for en mørk eller fargerik side. Sett linjen med prefiks først, så standardegenskapen vinner der begge forstås.

Glass ser bare ut som glass når det er noe verdt å gjøre uskarpt bak det. På en flat grå side ser panelet bare mørkere ut. Legg det over et fotografi eller en fyldig gradient, som [glassmorfisme](https://gradiently.design/nb/guide/glassmorphism) forklarer nærmere.

Glør og fiolett på midnatt: `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 bakgrunn med tydelige fargefelt. Uskarphet gjør feltene til mykt lys bak panelet, som er hele poenget med effekten.

## Hva funksjonene i backdrop-filter kan gjøre

Egenskapen tar de samme funksjonene som `filter`, og du kan kjede dem i én deklarasjon. De brukes i rekkefølge fra venstre til høyre, så `blur()` etterfulgt av `saturate()` virker annerledes enn motsatt rekkefølge. Hele listen finnes på [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter).

| Funksjon | Eksempel | Passer til |
| --- | --- | --- |
| `blur()` | `blur(12px)` | Frostet glass, demping bak en dialog |
| `saturate()` | `saturate(160%)` | Å få tilbake farge som uskarpheten gråner |
| `brightness()` | `brightness(0.7)` | Å mørkne et travelt område bak lys tekst |
| `contrast()` | `contrast(0.8)` | Å roe et urolig bilde under et panel |
| `grayscale()` | `grayscale(1)` | Å dempe siden bak en modal |
| `none` | `none` | Å slå av effekten i en reserve eller mediespørring |

Funksjonene du faktisk kommer til å bruke. `brightness()` under 1 gir ofte bedre lesbarhet enn kraftigere uskarphet.

## Ytelse med backdrop-filter

Uskarphet er noe av det mer kostbare en nettleser tegner. Den må lese hver piksel bak elementet, hente nabopiksler ut til radiusen og sette sammen resultatet. Arbeidet gjentas hver gang noe bak panelet endres. Et fast toppfelt over en rullende side tegner uskarpheten på nytt i hver bilderamme.

Kostnaden følger to tall du styrer: elementets areal og radiusen. Et toppfelt på 64 piksler med 12px uskarphet er billig på nesten alt. Et heldekkende overlegg med 40px uskarphet over video kan miste bilderammer på en mellomklassetelefon. Helheten dekkes i [ytelse for CSS-gradienter](https://gradiently.design/nb/guide/css-gradient-performance).

### Langsomt

- Uskarphet over hele visningsområdet bak en modal
- Radier på 30px og mer
- Animasjon av radiusen ved åpning og lukking
- Glasspaneler inni glasspaneler
- Uskarphet over automatisk avspilt video

### Raskt

- Uskarphet bare i feltet, kortet eller panelet som trenger det
- Radier mellom 8px og 20px
- Inn- og uttoning av panelets opasitet med fast uskarphet
- Ett glasslag, ugjennomsiktige flater inni
- Uskarphet over stillbilder og gradienter

> **Mål på en ekte telefon** Åpne Rendering-panelet i Chromes utviklerverktøy, slå på paint flashing og rull. Hvis glasset blinker i hver bilderamme og Performance-panelet viser tapte bilderammer, reduserer du først arealet eller radiusen.

## Hvorfor backdrop-filter ikke virker

Når uskarpheten ser ut til å gjøre ingenting, er årsaken nesten alltid én av noen få ting.

1. **Kontroller at bakgrunnen er gjennomsiktig** En ugjennomsiktig `background: #fff` dekker den uskarpe bakgrunnen helt. Bruk en alfaverdi som `rgb(255 255 255 / 0.15)`.
2. **Legg til Safari-prefikset** Safari godtar egenskapen uten prefiks først fra versjon 18. Eldre iPhoner trenger fortsatt `-webkit-backdrop-filter`.
3. **Se etter en backdrop root over elementet** Et foreldreelement med `filter`, `opacity` under 1, en maske eller eget backdrop-filter begrenser hva barnet ser. Barnet gjør da bare forelderen uskarp, noe som ofte ser ut som ingen uskarphet.
4. **Pass på fastplasserte barn** Som `filter` gjør backdrop-filter elementet til referanseboks for barn med fast eller absolutt plassering. En fast meny i et glasstoppfelt plasserer seg i forhold til toppfeltet, ikke vinduet.
5. **Sørg for at noe ligger bak** Uskarphet over en flat farge er usynlig. Rull panelet over et bilde for å bekrefte at det virker.

## En reserve som holder teksten lesbar

Gjennomskinnelige paneler er designet rundt uskarpheten. Uten den lar en hvit flate med 14 prosent opasitet over et travelt bilde teksten ligge rett på bildet, og kontrasten kollapser. Skriv den lesbare versjonen først, og oppgrader der nettleseren kan gjøre bakgrunnen uskarp.

```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;
  }
}
```

Gradvis forbedring for glass. Støtten for `prefers-reduced-transparency` er fortsatt begrenset, så se på blokken som et hensyn fremfor en garanti.

Kontroller kontrasten mot det vanskeligste punktet bak panelet, ikke gjennomsnittet. En hvit overskrift på glass som glir over en lys himmel, kan falle langt under forholdene i [fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility). Mørkning med `brightness(0.7)` løser vanligvis dette sikrere enn kraftigere uskarphet.

## Når du ikke trenger uskarphet

Mye frostet glass finnes bare for å gjøre ord lesbare over en travel bakgrunn. Hvis du kan designe bakgrunnen, løser en roligere variant problemet uten ekstra tegnekostnad. En myk gradient med lav kontrast bak et toppfelt trenger ikke panel. Se [bakgrunner til nettsidens toppfelt](https://gradiently.design/nb/guide/website-hero-background) og [uskarpe bakgrunner](https://gradiently.design/nb/guide/blurred-background), der uskarpheten bakes inn i bildet én gang fremfor å beregnes i hver bilderamme.

Et bredt toppfelt på en nettside med overskrift over den lyseste delen av en fargerik gradient

Ord rett over en livlig bakgrunn: her tyr mange til et glasspanel.

Samme toppfelt der gradienten blir mørkere og roligere bak overskriften

Samme bakgrunn som roer seg selv bak ordene, uten panel, skygge eller uskarphet.

Den andre tilnærmingen er slik Gradiently håndterer lesbarhet: en Mark vet hvor ordene er og flytter det roligste området med best kontrast bak dem. Du trenger derfor aldri en boks eller uskarphet for å redde en overskrift.

## FAQ

### Hva er forskjellen på filter og backdrop-filter?

`filter` endrer elementet og innholdet. `backdrop-filter` endrer bare det som er synlig bak elementet gjennom den gjennomsiktige bakgrunnen.

### Hvorfor synes ikke uskarpheten fra backdrop-filter?

Vanligvis er elementets bakgrunn helt ugjennomsiktig, Safari trenger `-webkit-`-prefikset, eller en forelder med `filter`, `opacity` eller en maske begrenser hva elementet ser.

### Er backdrop-filter dårlig for ytelsen?

Det kan være det. Kostnaden vokser med arealet og radiusen, og påløper igjen når innholdet bak beveger seg. Hold derfor glasspanelene små og radiene moderate.

### Trenger jeg fortsatt -webkit-backdrop-filter?

Safari godtar egenskapen uten prefiks fra versjon 18, men eldre iPhoner er fortsatt i bruk. Det er derfor fortsatt fornuftig å levere begge linjene.

### Hvilken uskarphetsverdi ser best ut for frostet glass?

Mellom 8px og 20px passer de fleste grensesnitt. Legg til `saturate()` over 100% for å hente tilbake fargen uskarpheten fjerner.