Glassmorphism-generator
De glassmorphism generator maakt het matglas-effect met CSS backdrop-filter, waarbij je blur, achtergronddekking, verzadiging, randdekking, radius en tintkleur aanpast met een live preview.
Over deze tool
De glassmorphism generator maakt het matglas-effect met CSS backdrop-filter, waarbij je blur, achtergronddekking, verzadiging, randdekking, radius en tintkleur aanpast met een live preview.
Zo gebruik je het
- Kies de tintkleur van het glas.
- Pas blur, dekking en verzadiging aan.
- Stel de randdekking en border radius in.
- Klik op Copy CSS.
Goed om te weten
- Het effect gebruikt backdrop-filter: blur() saturate(), dat alles achter het element vervaagt.
- Een halfdoorzichtige achtergrond (rgba) is nodig, anders is de blur niet zichtbaar.
- De gegenereerde CSS bevat de prefix -webkit-backdrop-filter voor Safari.
- Glas werkt het best op kleurrijke achtergronden of foto's; op egale kleuren is de blur niet zichtbaar.
- Let op het tekstcontrast: doorschijnende panelen kunnen op drukke achtergronden onder het WCAG-contrast zakken.
Werkt volledig in je browser — niets wat je invoert wordt geüpload of opgeslagen.
Veelgestelde vragen
Hoe maak ik een glaseffect in CSS?
Geef het element een halfdoorzichtige achtergrond, zoals rgba(255,255,255,0.15), en backdrop-filter: blur(12px); deze tool schrijft de volledige regel.
Waarom werkt mijn backdrop-filter niet?
Het element heeft een transparante of halfdoorzichtige achtergrond nodig en er moet iets achter zitten om te vervagen. Safari heeft ook de prefix -webkit- nodig.
Is glassmorphism toegankelijk?
Dat kan, als tekst voldoende contrast houdt. Test tekstkleuren op het drukste deel van de achtergrond.
Gaat backdrop-filter ten koste van de performance?
Vervagen belast de GPU flink, dus pas het niet toe op heel grote vlakken of veel elementen tegelijk, zeker niet op eenvoudige telefoons.