CSS Glassmorphism in 2025: de juiste manier om het te implementeren

De meeste tutorials online zijn van 2021. Ontdek wat er is veranderd en wat je fout hebt gedaan.

9 min leestijd backdrop-filter WCAG 2.1

Glassmorphism explodeerde in 2021 dankzij een Figma-tutorial en Apple’s macOS Big Sur-herontwerp. Vier jaar later heeft backdrop-filter 96 % wereldwijde ondersteuning bereikt, maar de artikelen die voor de zoekopdracht ranken zijn nog steeds dezelfde — verouderd, blind voor prestaties en doof voor toegankelijkheid. Deze gids vult de leemte.

backdrop-filter vs filter

.glass-card {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

WCAG

.glass-card p {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

Prestaties

@media (prefers-reduced-motion: reduce) {
  .glass-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.85);
  }
}
Gratis Tool Kleurcontrast Checker Controleer WCAG AA / AAA-conformiteit voor elk voorgrond-achtergrondpaar

Progressieve Fallback

.glass-card {
  background: rgba(30, 30, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
  }
}

@media (prefers-reduced-motion: reduce) {
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .glass-card {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: rgba(30, 30, 30, 0.88);
    }
  }
}

Donkere Modus

.glass-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

@media (prefers-color-scheme: light) {
  .glass-card {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
  }
}
Gratis Tool Glassmorphism Generator Bouw glaskaarten met backdrop-filter, @supports fallback en live voorbeeld

Wanneer NIET glassmorphism gebruiken

Open de generator

Gratis Tool Box Shadow Generator Pas alle zes parameters visueel aan en kopieer productieklaar CSS

CSS Glassmorphism in 2025: browserondersteuning, prestaties, toegankelijkheid

CSS glassmorphism is gebaseerd op de backdrop-filter-eigenschap, die in 2023 volledige browserondersteuning bereikte. In 2025 is de wereldwijde ondersteuning ongeveer 96 %. Firefox voegde ondersteuning toe in versie 103 (2022), waardoor JavaScript-polyfills niet meer nodig zijn.

Veelgestelde Vragen

Wat is het verschil tussen backdrop-filter en filter in CSS?+
backdrop-filter past effecten toe op het gebied achter een element zonder de eigen inhoud te beïnvloeden. filter werkt op het element zelf. Gebruik voor glassmorphism altijd backdrop-filter: filter: blur() op de kaart vervaagt de tekst van de kaart.
Ondersteunt Firefox backdrop-filter in 2025?+
Ja. Firefox voegde ondersteuning toe in versie 103 (juli 2022). In 2025 is het volledig ondersteund in Chrome 76+, Firefox 103+, Safari 9+ (met -webkit- prefix), Edge 17+.
Waarom ziet mijn glass card er slecht uit op mobiel?+
Twee veelvoorkomende redenen: prestaties — hoge blur-radius (meer dan 16–20 px) kan framerate-dalingen veroorzaken op mid-range Android. Contrast — op mobiele schermen met hoge helderheid kan een glass card met lage alpha de tekst bijna onleesbaar maken.
Hoe maak ik glassmorphism toegankelijk?+
Het hoofdprobleem is tekstcontrast. WCAG 2.1 AA vereist 4.5:1. Oplossingen: text-shadow toevoegen, de tekst een semi-opake donkere achtergrond geven, of de achtergrond achter de kaart controleren. Respecteer ook prefers-reduced-motion.
Welke blur-radius moet ik gebruiken voor glassmorphism?+
Het meest gebruikte bereik in productie is 8–16 px. Onder 8 px is het frost-effect nauwelijks zichtbaar. Boven 20 px is het dramatisch maar duur. Beperk voor mobiel tot 10–12 px.
Hoe schrijf ik een fallback voor browsers zonder backdrop-filter?+
Gebruik de @supports-regel met progressive enhancement: definieer een vaste, bijna ondoorzichtige achtergrond als basisstijl, overschrijf dan met doorschijnende achtergrond en blur-filter binnen @supports.
Is glassmorphism nog relevant in 2025?+
Ja — het is gerijpt van trend naar standaard UI-patroon voor specifieke contexten. Apple, Microsoft en Google gebruiken matglaseffecten in hun besturingssysteem-UI's. Het enthousiasme van 2021 heeft plaatsgemaakt voor doelbewuster gebruik.