Vijf declaraties, en ze werken alleen samen

Glas is een doorschijnende vulling, een blur met backdrop-filter, een verzadigingsboost, een lichte rand en een schaduw. Laat de verzadiging weg en het lijkt matte kunststof, want blurren alleen middelt kleur richting grijs terwijl echt glas het juist bundelt. Laat de rand weg en het paneel verliest zijn begrenzing volledig, want er is verder niets dat het scheidt van waar het boven zweeft. De rand doet het werk dat een schaduw op een dekkende kaart doet.

Houd de tint tussen 12 en 25%. Voorbij een derde blurt het niets meer dat je kunt zien en wordt het vlakke verf over een foto, en dat is verreweg de meest voorkomende manier waarop dit effect misgaat. Is de tekst op het paneel niet leesbaar, verhoog dan de blur of verschuif de tint naar de tegenpool van de tekst, in plaats van de dekking op te schroeven.

De fallback is niet optioneel

backdrop-filter is wat een vulling van 12% leesbaar maakt. Waar de property niet ondersteund wordt, is diezelfde vulling tekst op ongeblurde ruis, wat op elke lettergrootte zakt voor contrast en door de lezer niet te repareren is. De uitvoer draagt daarom altijd @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) met daarachter een dekkende vulling van 85%. Beide voorwaarden worden getest, want een browser die alleen ooit de property met voorvoegsel leverde zou anders de fallback pakken die hij niet nodig heeft.

Safari had tot versie 18 in 2024 -webkit-backdrop-filter nodig, en er zijn genoeg oudere apparaten in gebruik dat die regel met voorvoegsel zijn 40 bytes nog waard is. Hij staat als eerste, zodat de standaardproperty wint waar allebei begrepen worden.

Veelvoorkomende problemen

Er wordt niets geblurd. De eigen achtergrond van het element is volledig dekkend, dus er valt niets doorheen te zien. backdrop-filter filtert wat erachter zit, en een dekkende vulling verbergt precies dat.
Het werkt los wel maar binnen een ouder niet. Een voorouder met overflow: hidden, een filter of een opacity onder 1 maakt een nieuwe backdrop root, en de blur bemonstert dan die groep in plaats van de pagina. Het paneel uit de afknippende voorouder halen is meestal de oplossing.
Scrollen hapert op een telefoon. Een grote geblurde achtergrond wordt in elk frame waarin hij samengesteld wordt opnieuw getekend. Verklein de straal, maak het paneel kleiner, of laat het effect onder een breedtebreekpunt vallen. Een blur van 28px over een header op volle breedte is het dure geval.
De randen van het paneel zien er uitgewassen uit. De blur bemonstert ook buiten het paneel. Een iets stevigere rand, of een tweede lichte accentlijn langs de bovenrand, herstelt de begrenzing.

Veelgestelde vragen

Moet de tint wit of donker zijn?

Hij hoort bij de scène te passen. Een witte film over een bijna zwarte achtergrond leest als mist en niet als glas, en daarom kleurt de preset Op donker met de donkerste inkt van de site en houdt hij de rand wit op een lage dekking. De rand is de glans; de vulling is het glas.

Is glasmorfisme toegankelijk?

Alleen als je het controleert. Tekst op een doorschijnend paneel heeft een contrastverhouding die meebeweegt met wat er achter langs komt, dus het slechtste geval telt, niet het gemiddelde. Test tegen de lichtste en de donkerste delen van je achtergrond, en onthoud dat WCAG AA 4,5:1 voor gewone tekst wil. Een drukke foto achter een paneel van 12% haalt dat meestal niet, en het eerlijke antwoord is daar een dekkender vlak, speciaal voor het tekstblok.

Waarom gebruikt de Tailwind-uitvoer hier wel echte utilities?

Omdat elk onderdeel van dit effect er een heeft: backdrop-blur-[…], backdrop-saturate-[…], bg-[…], border-[…], rounded-[…] en shadow-[…]. Anders dan bij de filterpijplijn hangt hier niets van de volgorde af, dus de utilityvorm verliest niets. De @supports-fallback moet nog steeds in een stylesheet.

Kan ik de blur animeren?

Dat kan, en je gaat het voelen. Elk frame bemonstert en blurt de achtergrond opnieuw. Animeer in plaats daarvan de opacity of transform van het paneel en houd de blur op een vaste straal, wat je voor een fractie van de kosten dezelfde indruk van "het schoof binnen" geeft.