Glassmorphism CSS: matglaseffect met backdrop-filter

Het glassmorphism CSS-effect — die matglaslook die alles erachter vervaagt — is een vast onderdeel geworden van modern interfaceontwerp. De truc zit niet in één magische eigenschap; het is het samenspel van een doorschijnende achtergrondkleur, een vervaging via backdrop-filter, een dunne rand en een zachte schaduw die samenwerken. In deze gids bouwen we het effect vanaf nul op, met aandacht voor zowel prestaties als toegankelijkheid.

Wat glassmorphism is en uit welke lagen het bestaat

Wanneer je naar een echt glaspaneel kijkt, neem je vier dingen tegelijk waar: het vervaagde beeld erachter, de lichte tint van het glas, de glinstering langs de rand en het gevoel dat het oppervlak zweeft. In CSS bootsen we dit na met de volgende lagen:

• Vervaging: backdrop-filter: blur(...) vervaagt de pixels achter het element.
• Doorschijnendheid: een vulkleur met lage dekking via rgba() of hsl(... / 0.x).
• Rand: een 1px halftransparante witte border bootst het licht na dat de rand vangt.
• Diepte: een brede, zachte box-shadow geeft het zwevende gevoel.

Een cruciaal punt: het effect is alleen zichtbaar als er iets achter het paneel zit om te vervagen. Op een vlakke achtergrond met één kleur verdwijnt glassmorphism; je hebt een kleurrijk verloop, een foto of blobvormen nodig.

Een basis glassmorphism CSS-kaart

In de eenvoudigste vorm ziet een glaskaart er zo uit. We kleuren eerst de achtergrond en bouwen daarna de kaart:

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  display: grid;
  place-items: center;
}

.glass {
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  padding: 2rem;
  color: #fff;
}

De regel -webkit-backdrop-filter staat er niet voor niets: Safari ondersteunde lange tijd alleen de versie met prefix, en op mobiele Safari is het nog steeds verstandig om op safe te spelen. Schrijf de regel met prefix altijd vóór de standaardregel.

backdrop-filter fijn afstellen

backdrop-filter accepteert niet alleen blur(); je kunt meerdere filters achter elkaar zetten, gescheiden door spaties. De verzadiging verhogen is een geweldige manier om het glas levendiger te laten ogen:

.glass {
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

Een paar praktische tips:

• Mate van vervaging: 8–16px is ideaal voor de meeste kaarten. Boven de 30px wordt het traag én verliest het het "glas"-gevoel.
• Dekking van de vulling: 0,10–0,20 bij een licht thema, 0,05–0,10 bij een donker thema blijft meestal in balans.
• Verzadiging: saturate(150%–180%) laat de kleuren erachter opvallen, dicht bij hoe echt glas licht breekt.

De randglinstering realistisch maken

Een vlakke rand van één kleur oogt een beetje kunstmatig. In echt glas komt het licht van boven, dus de bovenrand is helderder dan de onderrand. Je kunt dit nabootsen met een verloopsrand in plaats van een effen rand:

.glass {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.1)) border-box;
}

Hier gebruiken we een background met twee lagen: het eerste verloop kleurt de vulling via padding-box, het tweede kleurt de rand via border-box. De rand verloopt dan van helder naar dof, hoek tot hoek.

Toegankelijkheid en leesbaarheid

De grootste valkuil bij glassmorphism is contrast. Tekst op een doorschijnend oppervlak kan onleesbaar worden, afhankelijk van de kleur erachter. Een paar voorzorgsmaatregelen:

• Streef naar minstens een contrastverhouding van 4,5:1 tussen tekst en de achtergrond (WCAG AA, normale tekst).
• Als je boven een sterk wisselende achtergrond zit, voeg een subtiele text-shadow aan de tekst toe of verhoog de dekking van het paneel een beetje.
• Dubbele zekerheid: als backdrop-filter niet wordt ondersteund, geef dan een iets ondoorzichtigere fallback-achtergrond zodat het paneel niet volledig transparant blijft en de tekst opslokt.

.glass {
  background: rgba(30, 30, 50, 0.6); /* fallback: ondoorzichtiger */
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.12); /* glas: transparanter */
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
  }
}

Dankzij de @supports-query gebruikt de browser de transparante glaslook als backdrop-filter wordt ondersteund, en de leesbare ondoorzichtige fallback als dat niet zo is. Dit is een schoolvoorbeeld van progressive enhancement.

Prestaties: waar je voorzichtig moet zijn

backdrop-filter is geen goedkoop effect; de browser moet het gebied erachter bij elke frame opnieuw vervagen. Let op:

• Beperk het aantal: gebruik een handvol glaspanelen in plaats van tientallen op hetzelfde scherm. Vervaging toepassen op elke rij van een lange lijst vertraagt merkbaar op mobiel.
• Vermijd animeren: animaties die de waarde van backdrop-filter elke frame wijzigen zijn duur; verplaats het paneel liever met transform of opacity.
• Beperk beweging: houd rekening met prefers-reduced-motion en zwakke apparaten; serveer indien nodig een eenvoudig ondoorzichtig paneel buiten @supports.

Veelgestelde vragen

Werkt backdrop-filter in alle browsers?

Het wordt ondersteund in de huidige versies van Chrome, Edge, Firefox en Safari; Safari vereiste lange tijd de -webkit--prefix, dus de regel met prefix toevoegen blijft een goede gewoonte. Gebruik voor oudere browsers altijd de @supports-fallback hierboven.

Wat is het verschil tussen backdrop-filter en filter?

filter vervaagt het element zelf (inclusief de inhoud); backdrop-filter vervaagt de pixels achter het element en laat de inhoud scherp. Voor het glaseffect heb je de tweede nodig.

Het effect verschijnt niet — waarom?

De twee meest voorkomende oorzaken: er is geen inhoudsrijke achtergrond achter het paneel om te vervagen (op een vlakke kleur is het onzichtbaar), of de vulling van het paneel is volledig ondoorzichtig en bedekt de vervaagde laag. Gebruik een kleurrijk verloop en verlaag de dekking van de vulling.

Wil je een moderne glasaccent op je interface? Ik kan performante, toegankelijke glassmorphism-componenten ontwerpen en coderen die bij je merk passen — neem contact op en laten we jouw idee samen tot leven brengen.