CSS Glassmorphism Generator

Deze tool bouwt een CSS-matglaseffect (glassmorphism) door een halfdoorzichtige achtergrond te combineren met backdrop-filter: blur() — sleep de schuiven over het kleurrijke voorbeeld om te zien hoe de glaskaart alles erachter vervaagt, en kopieer daarna de CSS. Het levert ook het -webkit-backdrop-filter-voorvoegsel dat Safari nodig heeft, aangezien backdrop-filter dat daar nog steeds vereist.

Wat is deze tool?

Glassmorphism is een UI-stijl waarbij een element eruitziet als matglas: een halfdoorzichtige achtergrond laat kleuren erachter doorschijnen, terwijl backdrop-filter: blur() die achtergrond vervaagt zodat het als glas overkomt in plaats van een gewoon transparant paneel. Een dunne, halfdoorzichtige rand en afgeronde hoeken maken de look meestal af.

Met deze tool bouw je dat effect visueel op. Het voorbeeld staat op een bewegende gradientachtergrond, specifiek zodat de blur zichtbaar is — glassmorphism komt alleen goed over boven iets met kleur of detail erachter, niet boven een vlakke witte pagina. Pas de transparantie van de achtergrondkleur, de blursterkte, de randtransparantie en de hoekradius aan, en kopieer daarna de gegenereerde CSS.

Bron: Filter Effects Module Level 1, W3C — definieert backdrop-filter, de eigenschap waarop dit effect is gebouwd.

Waarom gebruiken?

Live voorbeeld op een kleurrijke geanimeerde achtergrond, zodat je het matglaseffect echt kunt zien in plaats van te gokken naar blurwaarden tegen een lege achtergrond.
Volledige controle over achtergrondtransparantie, backdrop-blursterkte, randtransparantie en border-radius op één plek.
Levert automatisch zowel backdrop-filter als het -webkit-backdrop-filter-voorvoegsel, zodat je Safari-ondersteuning niet vergeet.
Draait volledig in je browser — niets van wat je configureert wordt ergens naartoe geüpload.
Gratis, geen aanmelding, werkt op mobiel.

Hoe te gebruiken

Kies een achtergrondkleur en pas de transparantie aan — lagere transparantie (10–25%) oogt als glas; hogere transparantie lijkt meer op een effen getint paneel.
Verhoog de blursterkte om te vervagen wat er achter het element zit — dit is wat het matglaseffect daadwerkelijk creëert, los van de transparantie zelf.
Pas de randtransparantie aan om een subtiele lichte rand toe te voegen, wat helpt om de glaskaart als een apart oppervlak te laten overkomen in plaats van te versmelten met de achtergrond.
Stel de border-radius in voor afgeronde hoeken — glassmorphism-kaarten zijn bijna altijd afgerond, zelden scherphoekig.
Kopieer de gegenereerde CSS en plak hem in je stylesheet. Onthoud dat het element iets met kleur of textuur erachter nodig heeft — glassmorphism is onzichtbaar boven een vlakke, effen achtergrond.

Voorbeeld

Invoer

Achtergrond: wit met 20% transparantie · Blur: 10px · Randtransparantie: 30% · Radius: 16px

Uitvoer

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

Een klassieke matglaskaartstijl, gebruikt in inlogpanelen, navigatiebalken en dashboardwidgets boven een kleurrijke of foto-achtergrond.

Safari en browserondersteuning

backdrop-filter wordt ondersteund in huidige versies van Chrome, Firefox, Edge en Safari, maar Safari vereiste historisch gezien het -webkit-backdrop-filter-voorvoegsel naast de niet-voorgevoegde eigenschap om de blur te renderen — zonder dat negeren oudere Safari-versies de blur stilzwijgend en tonen ze alleen de vlakke transparante achtergrond. Deze tool geeft daarom altijd beide declaraties.

Zie de backdrop-filter-documentatie van MDN voor actuele browsercompatibiliteit: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Waarom glassmorphism iets erachter nodig heeft

backdrop-filter vervaagt alleen wat zich visueel achter het element bevindt — een achtergrondafbeelding, een gradient, een ander gekleurd element, of content die eronder scrollt. Boven een vlakke witte of effen achtergrond is er niets om te vervagen, dus is het effect onzichtbaar en oogt het element als een licht getinte, afgeronde box. Plaats glassmorphism-elementen altijd boven een gradient, foto of anderszins drukke achtergrond om het effect te laten werken.

Combineren met andere CSS-effecten

Glassmorphism-kaarten combineren vaak met een subtiele box-shadow eronder voor extra diepte. Genereer hier de matglas-CSS, voeg daarna een zachte schaduw toe met de Box Shadow Generator en pas beide declaraties toe op hetzelfde element.

→ Box Shadow Generator · Border Radius Generator

Veelgestelde vragen

Waarom verschijnt het glaseffect niet op mijn pagina?

backdrop-filter vervaagt wat er achter het element zit. Als je element boven een vlakke witte of effen achtergrond staat, is er niets visueel interessants om te vervagen, dus oogt het gewoon als een flauw getinte box. Plaats het boven een gradient, afbeelding of andere gedetailleerde achtergrond om het matglaseffect zichtbaar te maken.

Heb ik het -webkit-backdrop-filter-voorvoegsel nodig?

Ja, als je wilt dat het effect betrouwbaar rendert in Safari. Deze tool geeft altijd zowel de standaard backdrop-filter als de -webkit--voorgevoegde versie samen, aangezien Safari historisch gezien het voorvoegsel nodig had om de blur toe te passen.

Wat is het verschil tussen achtergrondtransparantie en blur?

Achtergrondtransparantie bepaalt hoeveel van je gekozen tintkleur zichtbaar is versus hoeveel van wat erachter zit ongewijzigd doorschijnt. Blur bepaalt hoezeer die zichtbare achtergrond wordt uitgesmeerd/verzacht. Glassmorphism gebruikt beide samen — enige transparantie plus enige blur — in plaats van slechts één van de twee.

Kan ik backdrop-filter op elk element gebruiken?

Ja, maar het beïnvloedt alleen wat visueel achter dat element zit binnen de rendering van de pagina, niet de eigen kinderen van het element. Het heeft ook een prestatiekosten op sommige apparaten wanneer toegepast op veel elementen of vaak geanimeerd, dus het is het best te gebruiken voor een klein aantal prominente UI-oppervlakken zoals kaarten, modals of navigatiebalken in plaats van tientallen kleine elementen.

Waarom is mijn rand nauwelijks zichtbaar?

De rand in deze tool gebruikt een halfdoorzichtig wit, wat bedoeld is om subtiel te zijn — een lichte rand die helpt het glaspaneel als apart oppervlak te laten overkomen zonder eruit te zien als een harde, ondoorzichtige omlijning. Verhoog de randtransparantie-schuif als je een zichtbaarder rand wilt.