Glassmorphism-generator
Maak een matglas-effect (achtergrondvervaging) met live voorvertoning en kant-en-klare CSS.
- Direct
- Gratis
- Privé (lokaal verwerkt)
- Zonder registratie
Een glaseffect, zonder gokken
Stel de vervaging, transparantie, afronding en rand in: het matglas-paneel werkt live bij over een kleurrijke achtergrond, en de volledige CSS (met Safari-voorvoegsel) staat klaar om te kopiëren.
-
Stel de vervaging in
Hoe sterk de achtergrond vervaagt.
-
Stem het glas af
Transparantie, afronding, rand, tint.
-
Kopieer de CSS
Pas toe op je kaart of balk.
De gegenereerde CSS (standaardinstellingen)
| Eigenschap | Waarde |
|---|---|
| background | rgba(255, 255, 255, 0.25) |
| backdrop-filter | blur(8px) |
| border-radius | 16px |
| border | 1px solid rgba(255, 255, 255, 0.18) |
Het voorvoegsel -webkit-backdrop-filter wordt toegevoegd voor Safari. Het effect is alleen zichtbaar over een niet-effen achtergrond. Alles wordt lokaal gegenereerd.
Veelgestelde vragen
Wat is glassmorphism?
Een UI-stijl die matglas nabootst: een halftransparant paneel dat vervaagt wat erachter langskomt, met een dunne lichte rand. Veel gebruikt voor moderne kaarten, balken en vensters.
Hoe wordt het effect in CSS bereikt?
Met backdrop-filter: blur(...) dat de achtergrond vervaagt, een halftransparante rgba-vulling, een border-radius en een lichte rgba-rand. De tool genereert deze regels plus het -webkit-voorvoegsel voor Safari.
Waarom moet de achtergrond kleurrijk zijn?
De vervaging is alleen zichtbaar als er iets te vervagen valt achter het paneel. Op een effen achtergrond verdwijnt het effect. De voorvertoning plaatst het glas daarom over een gradiënt.
Is het compatibel met alle browsers?
backdrop-filter wordt goed ondersteund in recente browsers (met -webkit- voor Safari). Op zeer oude browsers plan je een iets dekkendere terugvalvulling voor de leesbaarheid.