Backdrop filter in CSS: matglas dat snel blijft

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.

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

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 dieper uitlegt.

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.

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.

Waarom backdrop-filter niet werkt

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

1. 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. 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. 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. 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. 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.

/* 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;
  }
}

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 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 en vervaagde achtergronden, waar de blur één keer in de afbeelding is ingebakken in plaats van bij elk frame berekend.

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.