# Backdrop filter i CSS: frostat glas som förblir snabbt

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

Frostat glas kräver tre rader CSS och kan ändå få en bra mobil att hacka. Här är koden, vad det kostar att rita och de reserver som håller orden läsbara när suddigheten aldrig kommer.

## The short version

- CSS-egenskapen backdrop filter tillämpar effekter som blur på ytan bakom ett element, inte på elementet självt.
- Ett element behöver en delvis genomskinlig bakgrund för att backdrop filter ska synas; på en solid bakgrund göms effekten.
- Kostnaden för blur växer med suddradien och storleken på den suddade ytan, och betalas på nytt varje gång innehållet bakom rör sig.
- Safari behövde prefixet -webkit-backdrop-filter till och med version 18, så att leverera båda raderna är fortfarande det säkra valet.
- En bra reserv är en mer ogenomskinlig bakgrund i en @supports-fråga, så att texten förblir läsbar när blurren saknas.

Ett **backdrop filter** i CSS tillämpar en grafisk effekt, oftast blur, på det som ligger bakom ett element. Skriv `backdrop-filter: blur(12px)` på ett element med en delvis genomskinlig bakgrund så mjuknar sidan under det, vilket är det frostade glasutseende som används i navigeringsfält, paneler och kort. Det stöds i alla aktuella webbläsare. Hantverket ligger i att hålla den suddade ytan liten, radien måttlig och reserven läsbar.

## Grundreceptet för frostat glas

Tre saker gör glas: en genomskinlig fyllning så att bakgrunden syns, själva suddigheten och en svag kant så att panelen får en form. De flesta lägger också till en liten mättnadshöjning, eftersom blur medelvärdesbildar färger och lämnar dem gråare än du väntar dig.

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

En ljus glaspanel för en mörk eller färgstark sida. Ha den prefixade raden först så att standardegenskapen vinner där båda förstås.

Glas ser bara ut som glas när det finns något värt att sudda bakom. På en platt grå sida ser panelen bara dunkel ut. Lägg den över ett fotografi eller en rik gradient, som [glassmorphism](https://gradiently.design/sv/guide/glassmorphism) förklarar mer ingående.

Glöd och violett 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 bakgrund med tydliga färgfläckar. Blur gör fläckarna till mjukt ljus bakom panelen, vilket är hela poängen med effekten.

## Vad funktioner i backdrop-filter kan göra

Egenskapen tar samma funktioner som `filter`, och du kan kedja dem i en deklaration. De tillämpas i ordning, från vänster till höger, så `blur()` följt av `saturate()` beter sig annorlunda än tvärtom. Hela listan finns på [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter).

| Funktion | Exempel | Bra för |
| --- | --- | --- |
| `blur()` | `blur(12px)` | Frostat glas, fokus bakom en dialogruta |
| `saturate()` | `saturate(160%)` | Att ge tillbaka färg efter att blur grånat den |
| `brightness()` | `brightness(0.7)` | Att mörkna ett rörigt område bakom ljus text |
| `contrast()` | `contrast(0.8)` | Att lugna ett stökigt foto under en panel |
| `grayscale()` | `grayscale(1)` | Att dämpa sidan bakom en modal |
| `none` | `none` | Att stänga av effekten i en reserv eller en mediefråga |

De funktioner du faktiskt kommer att använda. `brightness()` under 1 är ofta ett bättre läsbarhetsverktyg än en kraftigare blur.

## Prestanda för backdrop filter

Blur är något av det dyrare en webbläsare ritar. För att sudda en region måste den läsa varje pixel bakom elementet, ta prover av grannarna ut till suddradien och sammanfoga resultatet, och den upprepar arbetet varje gång något bakom panelen ändras. En klistrig header över en rullande sida ritar om sin blur i varje bildruta av rullningen.

Kostnaden skalar med två siffror du styr: elementets yta och radien. En header på 64 pixlar suddad med 12px är billig på nästan allt. Ett helskärmsöverlägg suddat med 40px över en video kan tappa bildrutor på en mellanklassmobil. Den bredare bilden finns i [CSS-gradienters prestanda](https://gradiently.design/sv/guide/css-gradient-performance).

### Långsamt

- Att sudda hela visningsytan bakom en modal
- Radier på 30px och uppåt
- Att animera suddradien vid öppning och stängning
- Glaspaneler inuti glaspaneler
- Blur över autospelande video

### Snabbt

- Att sudda bara fältet, kortet eller panelen som behöver det
- Radier mellan 8px och 20px
- Att tona in panelens opacitet, med fast blur
- Ett glaslager, solida fyllningar inuti
- Blur över stillbilder och gradienter

> **Mät på en riktig mobil** Öppna panelen Rendering i Chromes utvecklarverktyg, slå på paint flashing och rulla. Om glaset blinkar i varje bildruta och panelen Performance visar tappade bildrutor, krymp ytan eller radien före allt annat.

## Varför backdrop-filter inte fungerar

När blurren verkar inte göra något är orsaken nästan alltid en av en kort lista.

1. **Kontrollera att bakgrunden är genomskinlig** En solid `background: #fff` täcker den suddade bakgrunden helt. Använd ett alfavärde som `rgb(255 255 255 / 0.15)`.
2. **Lägg till Safari-prefixet** Safari accepterar bara den oprefixade egenskapen från version 18. Äldre iPhones behöver fortfarande `-webkit-backdrop-filter`.
3. **Leta efter en backdrop root ovanför** En förälder med `filter`, `opacity` under 1, en mask eller ett eget backdrop filter begränsar vad barnet kan se. Barnet suddar då bara den föräldern, vilket ofta ser ut som ingen blur alls.
4. **Se upp med fixed-barn** Liksom `filter` gör ett backdrop filter elementet till innehållande block för fixed- och absolut positionerade barn. En fixed meny inuti en glasheader placerar sig mot headern, inte fönstret.
5. **Se till att något finns bakom** Blur över en platt färg syns inte. Rulla panelen över en bild för att bekräfta att det fungerar.

## En reserv som håller texten läsbar

Genomskinliga paneler är utformade runt blurren. Utan den lämnar en vit fyllning på 14 procent över ett rörigt foto texten sittande på själva fotot, och kontrasten kollapsar. Skriv den läsbara versionen först och uppgradera den sedan där webbläsaren kan sudda.

```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 förbättring för glas. Stödet för `prefers-reduced-transparency` är fortfarande begränsat, så se det blocket som en artighet snarare än en garanti.

Kontrollera kontrasten mot den sämsta punkten bakom panelen, inte medelvärdet. En vit rubrik över glas som driver över en ljus himmel kan hamna långt under förhållandena i [färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility). Att mörkna med `brightness(0.7)` löser det oftast mer tillförlitligt än att sudda hårdare.

## När du inte behöver någon blur alls

Mycket frostat glas finns bara för att göra ord läsbara över en rörig bakgrund. Om bakgrunden är din att designa löser en lugnare problemet utan renderingskostnad. En mjuk gradient med låg kontrast bakom en hero behöver ingen panel; se [webbplatsens herobakgrunder](https://gradiently.design/sv/guide/website-hero-background) och [suddiga bakgrunder](https://gradiently.design/sv/guide/blurred-background), där suddigheten bakas in i bilden en gång i stället för att beräknas varje bildruta.

En bred webbplatshero med en rubrik som löper över den ljusaste delen av en färgstark gradient

Ord rakt över en livlig bakgrund: här sträcker sig folk efter en glaspanel.

Samma webbplatshero där gradienten blir mörkare och tystare bakom rubriken

Samma bakgrund som lugnar sig själv bakom orden, utan panel, skugga eller blur.

Det andra tillvägagångssättet är hur Gradiently hanterar läsbarhet: en Mark vet var orden finns och flyttar sin lugnaste, mest kontrasterande region bakom dem, så du behöver aldrig en ruta eller en blur för att rädda en rubrik.

## FAQ

### Vad är skillnaden mellan filter och backdrop-filter?

`filter` ändrar elementet och dess innehåll. `backdrop-filter` ändrar bara det som syns bakom elementet, genom dess genomskinliga bakgrund.

### Varför syns inte min backdrop-filter-blur?

Oftast är elementets bakgrund helt ogenomskinlig, Safari behöver prefixet `-webkit-`, eller så begränsar en förälder med `filter`, `opacity` eller en mask vad elementet kan se.

### Är backdrop-filter dåligt för prestandan?

Det kan vara det. Kostnaden växer med den suddade ytan och radien och betalas på nytt varje gång innehållet bakom rör sig, så håll glaspaneler små och radier måttliga.

### Behöver jag fortfarande -webkit-backdrop-filter?

Safari accepterar den oprefixade egenskapen från version 18, men äldre iPhones används fortfarande, så att leverera båda raderna är fortfarande klokt.

### Vilket suddvärde ser bäst ut för frostat glas?

Mellan 8px och 20px passar de flesta gränssnitt. Lägg till `saturate()` över 100 % för att återställa färgen som blur tar bort.