CSS-glassmorphism-generator
Ontwerp een glaseffect (glassmorphism) met live voorvertoning — pas vervaging, transparantie, tint en rand aan, en kopieer de CSS.
664 weergaven
Wat is glassmorphism?
Glassmorphism is de matglas-look: een semi-transparant paneel dat met backdrop-filter: blur() alles erachter vervaagt, gecombineerd met een subtiele rand en schaduw. Het werkt het best over kleurrijke of afbeeldingsachtergronden — op een effen achtergrond is de vervaging onzichtbaar.
Verschuif de schuifregelaars en bekijk de live voorvertoning; de CSS hieronder wordt direct bijgewerkt en is klaar om te kopiëren. Vergeet het -webkit-backdrop-filter-voorvoegsel voor Safari niet — dat zit al in de gegenereerde code.
Veelgestelde vragen
Waarom ziet mijn glaseffect er vlak uit?
backdrop-filter is alleen zichtbaar boven een gevarieerde achtergrond — plaats het element boven een verloop of afbeelding. Controleer ook de browserondersteuning: Safari heeft het -webkit--voorvoegsel nodig (zit al in de gegenereerde code).
Is backdrop-filter slecht voor de prestaties?
Vervaging is GPU-versneld maar niet gratis. Gebruik het op een paar belangrijke vlakken (kaarten, headers) in plaats van op tientallen elementen, en houd de vervagingsradius op mobiel gematigd.
Welke waarden geven een klassieke glaslook?
Een goed startpunt: witte achtergrond op 15-25% dekking, 8-12px vervaging, 1px rand met 30% wit en 16px radius — de standaardwaarden van deze generator.
Vergelijkbare tools
Probleem melden
CSS-glassmorphism-generator