# Backdrop filter in CSS: matglas dat snel blijft

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

Matglas kost drie regels CSS en kan toch een goede telefoon laten haperen. Hier staat de code, wat het kost om te tekenen en de terugvallen die tekst leesbaar houden als de blur uitblijft.

## The short version

- Het CSS-backdrop-filter past effecten zoals blur toe op het gebied achter een element, niet op het element zelf.
- Een element heeft een gedeeltelijk transparante achtergrond nodig om een backdrop-filter te tonen; op een effen achtergrond blijft het effect verborgen.
- De kosten van blur groeien met de blurstraal en de grootte van het vervaagde gebied, en worden opnieuw betaald telkens wanneer de inhoud erachter beweegt.
- Safari had tot versie 18 het voorvoegsel -webkit-backdrop-filter nodig, dus beide regels meeleveren blijft de veilige keuze.
- Een goede terugval is een dekkendere achtergrond binnen een @supports-query, zodat tekst leesbaar blijft als de blur ontbreekt.

Een **backdrop-filter** in CSS past een grafisch effect, meestal blur, toe op alles wat achter een element zit. Schrijf `backdrop-filter: blur(12px)` op een element met een gedeeltelijk transparante achtergrond en de pagina eronder wordt zachter. Dat is de matglaslook van navigatiebalken, sheets en kaarten. Het wordt ondersteund in elke huidige browser. Het vakmanschap zit in het klein houden van het vervaagde gebied, een bescheiden straal en een leesbare terugval.

## Het basisrecept voor matglas

Drie dingen maken glas: een doorschijnende vulling zodat de achtergrond zichtbaar is, de blur zelf en een vage rand zodat het paneel een vorm heeft. De meeste mensen voegen ook een kleine verzadigingsboost toe, omdat blur kleuren uitmiddelt en grijzer maakt dan je verwacht.

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

Een licht glaspaneel voor een donkere of kleurrijke pagina. Zet de regel met voorvoegsel eerst, zodat de standaardeigenschap wint waar beide worden begrepen.

Glas ziet er alleen uit als glas wanneer er iets is om te vervagen. Op een vlakke grijze pagina ziet het paneel er gewoon dof uit. Leg het over een foto of een rijk verloop, zoals [glassmorphism](https://gradiently.design/nl/guide/glassmorphism) dieper uitlegt.

Gloed en violet op middernacht: `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%)`

Een achtergrond met duidelijke kleurvlakken. Blur verandert de vlakken in zacht licht achter het paneel, en dat is precies het doel van het effect.

## Wat backdrop-filter-functies kunnen

De eigenschap accepteert dezelfde functies als `filter` en je kunt ze in één declaratie aaneenschakelen. Ze worden op volgorde toegepast, van links naar rechts, dus `blur()` gevolgd door `saturate()` werkt anders dan andersom. De volledige lijst staat op [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter).

| Functie | Voorbeeld | Goed voor |
| --- | --- | --- |
| `blur()` | `blur(12px)` | Matglas, focus achter een dialoogvenster |
| `saturate()` | `saturate(160%)` | Kleur terugbrengen nadat blur die grijs maakt |
| `brightness()` | `brightness(0.7)` | Een drukke plek achter lichte tekst verdonkeren |
| `contrast()` | `contrast(0.8)` | Een rumoerige foto onder een paneel kalmeren |
| `grayscale()` | `grayscale(1)` | De pagina achter een modal dempen |
| `none` | `none` | Het effect uitzetten in een terugval of mediaquery |

De functies die je echt zult gebruiken. `brightness()` onder 1 is vaak een beter hulpmiddel voor leesbaarheid dan een zwaardere blur.

## Prestaties van backdrop-filter

Blur is een van de duurdere dingen die een browser tekent. Om een gebied te vervagen moet hij elke pixel achter het element lezen, de buren tot aan de blurstraal bemonsteren en het resultaat samenstellen, en dat werk herhaalt hij zodra iets achter het paneel verandert. Een sticky header boven een scrollende pagina tekent zijn blur opnieuw bij elk frame van het scrollen.

De kosten schalen met twee getallen die je zelf bepaalt: de oppervlakte van het element en de straal. Een header van 64 pixels met 12px blur is goedkoop op bijna alles. Een overlay op volledig scherm met 40px blur over een video kan frames laten vallen op een telefoon uit het middensegment. Het bredere plaatje staat in [CSS-verloopprestaties](https://gradiently.design/nl/guide/css-gradient-performance).

### Traag

- Het hele venster achter een modal vervagen
- Stralen van 30px en hoger
- De blurstraal animeren bij openen en sluiten
- Glaspanelen genest in glaspanelen
- Blur over automatisch afspelende video

### Snel

- Alleen de balk, kaart of sheet vervagen die het nodig heeft
- Stralen tussen 8px en 20px
- De dekking van het paneel laten infaden, met vaste blur
- Eén glaslaag, effen vullingen erin
- Blur over stilstaande beelden en verlopen

> **Meet op een echte telefoon** Open in de ontwikkelaarstools van Chrome het paneel Rendering, zet paint flashing aan en scroll. Als het glas bij elk frame knippert en het Performance-paneel gevallen frames toont, verklein dan eerst het gebied of de straal.

## Waarom backdrop-filter niet werkt

Als de blur niets lijkt te doen, is de oorzaak bijna altijd een van een korte lijst.

1. **Controleer of de achtergrond doorzichtig is** Een effen `background: #fff` bedekt de vervaagde achtergrond volledig. Gebruik een alfawaarde zoals `rgb(255 255 255 / 0.15)`.
2. **Voeg het Safari-voorvoegsel toe** Safari accepteert de eigenschap zonder voorvoegsel pas vanaf versie 18. Oudere iPhones hebben nog `-webkit-backdrop-filter` nodig.
3. **Zoek naar een backdrop-root erboven** Een bovenliggend element met `filter`, `opacity` onder 1, een masker of een eigen backdrop-filter beperkt wat het kind kan zien. Het kind vervaagt dan alleen dat bovenliggende element, wat er vaak uitziet als helemaal geen blur.
4. **Let op fixed kinderen** Net als `filter` maakt een backdrop-filter het element de containing block voor fixed en absoluut gepositioneerde kinderen. Een fixed menu in een glazen header positioneert zich tegen de header, niet tegen het venster.
5. **Zorg dat er iets achter zit** Blur over een vlakke kleur is onzichtbaar. Scroll het paneel over een afbeelding om te bevestigen dat het werkt.

## Een terugval die tekst leesbaar houdt

Doorschijnende panelen zijn ontworpen rond de blur. Zonder blur laat een witte vulling van 14 procent over een drukke foto de tekst op de foto zelf staan, en stort het contrast in. Schrijf eerst de leesbare versie en upgrade die waar de browser kan vervagen.

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

Progressieve verbetering voor glas. Ondersteuning voor `prefers-reduced-transparency` is nog beperkt, dus zie dat blok als een beleefdheid, niet als een garantie.

Controleer het contrast tegen de slechtste plek achter het paneel, niet het gemiddelde. Een witte kop over glas dat over een heldere lucht drijft, kan ver onder de verhoudingen in [kleurcontrast en toegankelijkheid](https://gradiently.design/nl/guide/color-contrast-accessibility) vallen. Verdonkeren met `brightness(0.7)` lost dit meestal betrouwbaarder op dan harder vervagen.

## Wanneer je helemaal geen blur nodig hebt

Veel matglas bestaat alleen om woorden leesbaar te maken over een drukke achtergrond. Als je de achtergrond zelf mag ontwerpen, lost een rustigere het probleem op zonder renderkosten. Een zacht verloop met weinig contrast achter een hero heeft geen paneel nodig; zie [achtergronden voor website-hero’s](https://gradiently.design/nl/guide/website-hero-background) en [vervaagde achtergronden](https://gradiently.design/nl/guide/blurred-background), waar de blur één keer in de afbeelding is ingebakken in plaats van bij elk frame berekend.

Een brede website-hero met een kop die over het helderste deel van een kleurrijk verloop loopt

Woorden direct over een levendige achtergrond: hier grijpen mensen naar een glaspaneel.

Dezelfde website-hero waarbij het verloop donkerder en rustiger wordt achter de kop

Dezelfde achtergrond die zichzelf kalmeert achter de woorden, zonder paneel, schaduw of blur.

Die tweede aanpak is hoe Gradiently leesbaarheid regelt: een Mark weet waar de woorden staan en verplaatst zijn rustigste, best contrasterende gebied erachter, zodat je nooit een vak of blur nodig hebt om een kop te redden.

## FAQ

### Wat is het verschil tussen filter en backdrop-filter?

`filter` verandert het element en zijn inhoud. `backdrop-filter` verandert alleen wat zichtbaar is achter het element, door zijn transparante achtergrond heen.

### Waarom zie ik mijn backdrop-filter-blur niet?

Meestal is de achtergrond van het element volledig dekkend, heeft Safari het voorvoegsel `-webkit-` nodig, of beperkt een bovenliggend element met `filter`, `opacity` of een masker wat het element kan zien.

### Is backdrop-filter slecht voor de prestaties?

Het kan. De kosten groeien met het vervaagde gebied en de straal en worden opnieuw betaald zodra de inhoud erachter beweegt, dus houd glaspanelen klein en stralen bescheiden.

### Heb ik -webkit-backdrop-filter nog nodig?

Safari accepteert de eigenschap zonder voorvoegsel vanaf versie 18, maar oudere iPhones blijven in gebruik, dus beide regels meeleveren is nog steeds verstandig.

### Welke blurwaarde ziet er het best uit voor matglas?

Tussen 8px en 20px past bij de meeste interfaces. Voeg `saturate()` boven 100% toe om de kleur terug te brengen die blur wegneemt.