Wat is glassmorphism?

Een visuele stijl waarbij een doorschijnend paneel alles erachter vervaagt, zoals matglas, meestal met een dunne lichte rand en een zachte schaduw. In CSS combineer je daarvoor een halfdoorzichtige achtergrond met backdrop-filter: blur().

Waarom is mijn glaspaneel niet vervaagd?

backdrop-filter werkt alleen op inhoud achter het element, dus het element heeft een transparante of halfdoorzichtige achtergrond nodig en iets zichtbaars erachter. Een volledig ondoorzichtige achtergrond verbergt het effect.

Welke browsers ondersteunen backdrop-filter?

Actuele versies van Chrome, Edge, Firefox en Safari ondersteunen het. Safari-versies vóór 18 hebben het voorvoegsel -webkit- nodig, dat in de geëxporteerde CSS zit.

Glassmorphism-generator

Maak panelen van matglas met backdrop-filter. Stem vervaging, transparantie, verzadiging en rand af op een live achtergrond en kopieer de CSS.

Livevoorbeeld

Matglas

Tekst op glas heeft genoeg contrast nodig met elk deel van de achtergrond.

De achtergrond is alleen voor het voorbeeld en wordt niet geëxporteerd.

.glass {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
}

Alles blijft in je browser.

Referenties

MDN — backdrop-filter
W3C — WCAG 2.2 contrast (minimum)

Pagina bijgewerkt: 2026-10-25

Livevoorbeeld

Handleiding en voorbeeld

Gerelateerde tools

Referenties