Glassmorfisme Generator
Maak glassmorphism CSS-effecten met visuele bedieningselementen. Pas dekking, vervaging en verzadiging aan voor matglas UI.
Belangrijkste functies
- Instelbare dekking, blur en verzadiging
- Selectie van eigen tintkleur
- Live voorvertoning over verloopachtergronden
- Kopieer-klare CSS-uitvoer
Guide
Glassmorfisme is een visuele ontwerpstijl waarbij UI-elementen verschijnen als matglazen panelen die zweven over een kleurrijke achtergrond. Het effect leunt op drie CSS-eigenschappen die samenwerken: achtergrondtransparantie (rgba of hsla met lage alpha), achtergrondvervaging (backdrop-filter: blur()) en een subtiele rand of schaduw die de paneelrand definieert. De stijl kreeg bekendheid in 2020 met Apple's macOS Big Sur en is sindsdien een vast onderdeel geworden van modern web- en mobiel UI-ontwerp. Deze gids behandelt de technische implementatie, prestatie-implicaties, ontwerpprincipes en praktische patronen voor het effectief gebruiken van glassmorfisme. De kern-CSS voor een glassmorfisme-paneel vereist drie declaraties. Ten eerste een semi-transparante achtergrond: background: rgba(255, 255, 255, 0,15) voor een licht glaseffect of background: rgba(0, 0, 0, 0,25) voor een donker glaseffect. Ten tweede een achtergrondvervaging: backdrop-filter: blur(12px). Ten derde een rand die licht vangt: border: 1px solid rgba(255, 255, 255, 0,2). De combinatie van transparante achtergrond, vervaagde achtergrond en lichtende rand creëert de matglas-illusie. Zonder ook maar één van deze drie componenten valt het effect plat. Een transparante achtergrond zonder vervaging lijkt op een gekleurde overlay. Vervaging zonder transparantie toont niets achter het element. En zonder een rand verdwijnen de paneelranden in de achtergrond. De backdrop-filter-eigenschap past grafische effecten toe op het gebied achter een element. Het ondersteunt dezelfde filterfuncties als de CSS filter-eigenschap: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() en drop-shadow(). Voor glassmorfisme is blur() de primaire functie. De vervagingsstraal regelt de intensiteit van het matte effect: blur(4px) creëert een subtiele zachtheid, blur(12px) creëert een middelmatige matheid en blur(24px) creëert een zware matheid waarbij achtergronddetails nauwelijks zichtbaar zijn. Je kunt meerdere functies combineren: backdrop-filter: blur(12px) saturate(180%) voegt kleurlevendigheid toe aan de vervaagde achtergrond, wat kleuren achter het glas levendiger laat lijken. De vervagingsstraalwaarde bepaalt hoe glazig versus solide het paneel lijkt. Lagere waarden (4px tot 8px) behouden meer achtergronddetail en voelen lichter. Middelmatige waarden (10px tot 16px) creëren de klassieke matglas-uitstraling. Hogere waarden (20px+) verbergen de achtergrond bijna volledig, waarna je de glasmetafoor verliest en het paneel eruitziet als een solide doorschijnend oppervlak. Voor de meeste UI-toepassingen treffen 8px tot 16px de juiste balans tussen visuele interesse en content-leesbaarheid. Test je gekozen vervagingsstraal met je daadwerkelijke achtergrondcontent om te verifiëren dat het effect werkt zoals bedoeld. Achtergrond-alpha (transparantie) werkt in spanning met vervagingsstraal. Een achtergrond met zeer lage alpha (0,05 tot 0,10) toont meer van de vervaagde achtergrond, wat een lichtere, transparantere uitstraling creëert. Een achtergrond met hogere alpha (0,25 tot 0,40) verbergt meer van de achtergrond, wat een solider, ondoorzichtiger gevoel creëert. De juiste combinatie hangt af van wat achter het glaspaneel staat. Over een drukke, kleurrijke achtergrond verzekeren hogere alpha en sterkere vervaging dat tekst leesbaar blijft. Over een eenvoudige, gedempte achtergrond creëren lagere alpha en lichtere vervaging een eleganter effect. Er is geen enkele correcte combinatie. Elke ontwerpcontext vereist testen om de balans te vinden tussen visueel effect en bruikbaarheid. Rand en schaduw definiëren de rand van het glaspaneel en zijn essentieel om de illusie te laten werken. Zonder een rand versmelt het paneel met zijn omgeving en verliest zijn dimensionale kwaliteit. Een dunne rand met rgba(255, 255, 255, 0,18) op een licht glaspaneel of rgba(255, 255, 255, 0,08) op een donker glaspaneel simuleert licht dat de rand van echt glas vangt. Box-shadow voegt diepte toe: box-shadow: 0 8px 32px rgba(0, 0, 0, 0,12) voor een lichte schaduw of box-shadow: 0 8px 32px rgba(0, 0, 0, 0,37) voor dramatischer verheffing. De schaduw versterkt dat het paneel boven de achtergrond zweeft. Sommige implementaties voegen een tweede, binnenste schaduw toe voor extra dimensie. Prestaties van backdrop-filter is de belangrijkste overweging voor productiegebruik. Achtergrondvervaging is GPU-intensief omdat de browser de content achter het element moet renderen, het vervagingsfilter toepassen op die gerenderde content en daarna het vervaagde resultaat compositen onder het semi-transparante element. Dit gebeurt elk frame als er iets achter het glaspaneel verandert (scrollen, animaties, video). Op high-end desktop-GPU's is dit soepel. Op low-end mobiele apparaten kan het aanzienlijke frame-dalingen en batterijafvoer veroorzaken. De prestatiekosten schalen met de vervagingsstraal en het gebied dat wordt vervaagd. Een kleine glaskaart met blur(8px) is veel goedkoper dan een volledige-breedte-glas-navigatiebalk met blur(20px). Strategieën voor prestatieoptimalisatie omvatten het beperken van het aantal glaselementen tegelijk zichtbaar (vermijd glaspanelen plaatsen op elke kaart in een raster van 50 items), het verminderen van de vervagingsstraal op mobiel (blur(8px) in plaats van blur(20px) op kleinere schermen), het vermijden van glaseffecten over geanimeerde of video-achtergronden op mobiel en het gebruik van will-change: backdrop-filter als hint aan de browser om GPU-resources voor te bereiden. Je kunt ook de contain: paint-eigenschap gebruiken op het glaselement om de compositing-scope te beperken. Test op daadwerkelijke low-end apparaten, niet alleen je ontwikkelingsmachine. Een glaseffect dat goed presteert op een MacBook Pro kan haperen op een budget Android-telefoon met een Adreno 505-GPU. Browserondersteuning voor backdrop-filter is nu wijdverbreid. Chrome, Edge, Safari en Firefox ondersteunen het allemaal. Het -webkit-voorvoegsel (-webkit-backdrop-filter) is nog steeds nodig voor Safari-versies vóór 18. Internet Explorer ondersteunt het niet. Voor browsers zonder ondersteuning is de fallback een solide semi-transparante achtergrond zonder vervaging. Definieer dit als de standaard en laag de vervaging erbovenop: background: rgba(255, 255, 255, 0,7) als fallback (meer ondoorzichtig om leesbaarheid te behouden zonder vervaging), daarna @supports (backdrop-filter: blur(1px)) { background: rgba(255, 255, 255, 0,15); backdrop-filter: blur(12px); } voor capabele browsers. De fallback behoudt bruikbaarheid ten koste van het glaseffect. Een compleet glassmorfisme-CSS-snippet ziet er zo uit. Voor de basisstijlen: background: rgba(255, 255, 255, 0,7) als fallback voor browsers zonder backdrop-filter-ondersteuning. Daarna binnenin een @supports-blok: background: rgba(255, 255, 255, 0,15), gevolgd door backdrop-filter: blur(12px) en -webkit-backdrop-filter: blur(12px). Buiten het @supports-blok voeg je border: 1px solid rgba(255, 255, 255, 0,2), box-shadow: 0 8px 32px rgba(0, 0, 0, 0,1) en border-radius: 16px toe. Dit patroon dekt alle browsers met sierlijke degradatie. De kleurtemperatuur van het glaseffect stelt de stemming in. Warm glas gebruikt licht getinte achtergronden: rgba(255, 200, 150, 0,15) voegt een warme barnsteen-tint toe. Koel glas gebruikt blauwe tinten: rgba(100, 150, 255, 0,15). Neutraal glas gebruikt wit of zwart op verschillende ondoorzichtigheden. De tint wisselwerkt met welke kleuren dan ook achter het glas, dus de waargenomen kleur verandert naarmate de achtergrond verandert. Deze dynamische kwaliteit is deel van wat glassmorfisme levendig en responsief aan context laat aanvoelen. Voor merk-gekleurd glas gebruik je je merkkleur op zeer lage alpha (0,05 tot 0,15) om het doorschijnende effect te behouden terwijl je merkidentiteit versterkt. Glassmorfisme in donkere modus keert de benadering om. In plaats van licht glas over een kleurrijke achtergrond, gebruik je donker glas (rgba(0, 0, 0, 0,40) of rgba(17, 25, 40, 0,60)) met een lichtere rand (rgba(255, 255, 255, 0,08)). De achtergrondvervaging werkt hetzelfde. Donkere glaspanelen lijken verfijnd over donkere achtergronden met subtiele kleurgradiënten of omgevingslicht-effecten. Apple's Control Center op iOS is een canoniek voorbeeld van donker glassmorfisme. Voor donkere modus is de randkleurverschuiving belangrijk: schakel van witte randen naar iets lichtere versies van de donkere achtergrond om de glasrand te behouden zonder dat de rand te helder lijkt. Tekstleesbaarheid op glaspanelen vereist zorgvuldige aandacht, want dit is waar glassmorfisme het meest faalt. De semi-transparante, vervaagde achtergrond betekent dat de effectieve achtergrondkleur verandert afhankelijk van wat achter het paneel staat. Witte tekst kan leesbaar zijn als het paneel over een donker gebied van de achtergrond staat, maar onleesbaar als het over een licht gebied beweegt (tijdens scrollen, bijvoorbeeld). Oplossingen omvatten het gebruik van hogere achtergrond-alpha om een minimum contrast te verzekeren ongeacht wat er achter staat, het toevoegen van een text-shadow voor extra scheiding (text-shadow: 0 1px 2px rgba(0, 0, 0, 0,3)), het gebruik van vollere lettertype-gewichten (600 of 700 in plaats van 400) en het verzekeren dat de achtergrond achter de glaspanelen wordt gecontroleerd en niet te gevarieerd is in helderheid. Gelaagd glas creëert diepte door meerdere glaspanelen te stapelen met verschillende vervagingsniveaus en ondoorzichtigheden. Een achtergrond-glaslaag met zware vervaging en lage ondoorzichtigheid staat achter een voorgrond-glaspaneel met lichtere vervaging en iets hogere ondoorzichtigheid. Dit creëert een gevoel van diepte en hiërarchie. Apple gebruikt dit uitgebreid in macOS en iOS. Implementeer het met z-index-gelaagdheid: de achtergrondlaag heeft een hogere vervagingsstraal (blur(20px)) en de voorgrondlaag heeft een lagere vervagingsstraal (blur(8px)) met iets meer ondoorzichtigheid. Drie of meer lagen is mogelijk maar zeldzaam, en elke laag voegt toe aan de renderingkosten. Glassmorfisme werkt het best voor specifieke UI-patronen: navigatiebalken zwevend over content, modale dialogen en overlays, notificatiepanelen, zijbalken, kaartelementen over hero-secties, mediaspeler-controls over albumhoezen, tooltip- en popover-elementen en dashboard-widgets over datavisualisaties. Het werkt slecht voor dichte contentgebieden (artikeltekst, gegevenstabellen, formulieren met veel velden) waar de verschuivende achtergrond achter het glas afleidt van de content. Gebruik glaseffecten als accenten, niet als de standaard oppervlaktebehandeling voor alles op de pagina. De achtergrond achter het glaspaneel doet er evenveel toe als het glas zelf. Glassmorfisme ziet er het best uit over kleurrijke, gradiënt-achtergronden met soepele overgangen. Een gradiënt van diep paars naar oceaanblauw, of van warm oranje naar roze, biedt de ideale achtergrond voor het vervagingseffect. Het glaspaneel verzacht en diffundeert deze kleuren prachtig. Over een effen witte of effen zwarte achtergrond is het glaseffect onzichtbaar omdat er niets te vervagen is. Over een drukke fotografische achtergrond met scherpe details produceert de vervaging een modderig resultaat. Ontwerp je achtergrond en je glaspanelen samen als een systeem. Glassmorfisme combineren met andere ontwerpelementen versterkt het effect. Subtiele gradiënten op de glaspaneel-achtergrond (een linear-gradient van rgba(255,255,255,0,2) naar rgba(255,255,255,0,05)) voegen directioneel licht toe. Binnenste schaduwen (box-shadow: inset 0 1px 0 rgba(255,255,255,0,2)) simuleren licht dat de bovenrand van het glas raakt. Border-radius verzacht het paneel (16px tot 24px is algemeen in glassmorfisme-ontwerpen). Samen maken deze details het glas meer fysiek en driedimensionaal aanvoelen. Animatie met glaselementen moet soepel en doelbewust zijn. Fade glaspanelen in met ondoorzichtigheidsovergangen. Schuif ze in positie met transform-translaties. Vermijd het animeren van de backdrop-filter-vervangingswaarde zelf, want het wijzigen van de vervagingsstraal elk frame dwingt de browser om de vervaagde achtergrond te regenereren, wat extreem duur is. Heb je een vervagingsanimatie nodig, overweeg dan een aparte vervaagde achtergrondlaag te animeren met CSS filter: blur() op een pseudo-element, wat makkelijker voor browsers te optimaliseren is dan backdrop-filter. Transform- en ondoorzichtigheidsanimaties op glaselementen presteren goed omdat ze niet vereisen dat de vervaging opnieuw wordt berekend. Ontwerpsysteem-integratie van glassmorfisme vereist het definiëren van een set glas-tokens: glas-achtergrondkleuren op lichte en donkere ondoorzichtigheden, glas-randkleuren, glas-schaduwwaarden en glas-vervagingsstralen voor verschillende contexten. Creëer herbruikbare CSS-klassen of componentvarianten: .glass-light, .glass-dark, .glass-subtle, .glass-prominent. Documenteer welke glasvarianten werken op welke achtergrondtypes. Dit voorkomt de inconsistentie van ad-hoc-glaswaarden door de hele codebase en verzekert dat het effect consistent degradeert in niet-ondersteunde browsers. Glassmorfisme in React, Vue en andere component-frameworks wordt doorgaans geïmplementeerd als een herbruikbare component of een CSS-utility-klasse. In React accepteert een GlassPanel-component props voor vervagingsintensiteit, ondoorzichtigheid, tintkleur en randzichtbaarheid, en rendert een div met de berekende stijlen. Tailwind CSS maakt glassmorfisme eenvoudig met utility-klassen: bg-white/15 backdrop-blur-md border border-white/20 rounded-2xl shadow-lg. Implementatie op componentniveau verzekert consistente glaseffecten over de applicatie en biedt één plek om het effect bij te werken als ontwerpvereisten veranderen. Toegankelijkheidszorgen met glassmorfisme draaien om tekstleesbaarheid en bewegingsgevoeligheid. Zoals besproken kan de verschuivende achtergrond achter glaspanelen tekst moeilijk leesbaar maken. Bovendien is het vervagingseffect zelf een visueel effect dat sommige gebruikers met vestibulaire aandoeningen desoriënterend kunnen vinden, in het bijzonder als glaspanelen scrollen over veranderende achtergronden. Respecteer de prefers-reduced-transparency- en prefers-reduced-motion-media queries. Voor gebruikers die verminderde transparantie verkiezen, val terug op een solide ondoorzichtige achtergrond. Voor gebruikers die verminderde beweging verkiezen, vermijd het animeren van glaspanelen. Glassmorfisme vergeleken met andere ontwerptrends bezet een specifieke niche. Neomorfisme (soft UI) gebruikt subtiele schaduwen om verhoogde en ingedrukte effecten te creëren op zelfde-gekleurde achtergronden. Het lijdt onder slecht contrast en toegankelijkheidsproblemen. Flat design gebruikt effen kleuren zonder diepteeffecten. Material Design gebruikt verheffing en schaduwen op ondoorzichtige oppervlakken. Glassmorfisme zit tussen flat design en material design in en voegt diepte toe via transparantie in plaats van alleen schaduw. Het werkt het best als accentstijl. Een hele applicatie in glassmorfisme wordt visueel rumoerig. Selectief gebruik (navigatie, modals, uitgelichte kaarten) creëert visuele interesse zonder de gebruiker te overweldigen. Real-world voorbeelden van glassmorfisme-implementaties bieden referentiepunten. Apple gebruikt glassmorfisme uitgebreid in macOS (menubalk, zijbalken, notificatiecentrum) en iOS (Control Center, widgets, app-switcher). Microsoft gebruikt Acrylic-materiaal in Windows 11 (Start-menu, taakbalk, instellingenpanelen), wat een variatie van glassmorfisme is met een ruis-textuur-overlay. Deze implementaties demonstreren dat glassmorfisme het best werkt als het besturingssysteem of de applicatie de achtergrondcontent controleert, wat een consistent niveau van vervaging en contrast verzekert. Op het web, waar je zowel de achtergrond als de glaspanelen controleert, heb je hetzelfde niveau van controle. Ruis-textuur-overlay voegt een subtiele korrel toe aan glaspanelen die ze meer op fysiek matglas laat lijken. Echt matglas heeft een iets ruwe textuur, geen perfect gladde vervaging. Je kunt deze textuur toevoegen met een pseudo-element met een ruis-PNG of SVG-filter op zeer lage ondoorzichtigheid (2 tot 5 procent). De ruis voorkomt dat het glas te digitaal schoon lijkt. Microsoft's Acrylic-materiaal gebruikt deze techniek. Implementatie: voeg een ::before-pseudo-element toe met een kleine getegelde ruisafbeelding als achtergrond, position absolute om het paneel te vullen en stel ondoorzichtigheid in op 0,03 tot 0,05. Glassmorfisme bij scrollen vereist zorgvuldige implementatie. Een vaste glas-navigatiebalk over scrollende content creëert een constant veranderend vervagingseffect als verschillende content erlangs passeert. Dit ziet er geweldig uit maar is prestatie-intensief omdat de backdrop-filter elk frame tijdens scrollen opnieuw moet worden berekend. Voor lange pagina's met zware scroll-gebaseerde vervaging, overweeg een eenvoudiger effect op mobiel (solide semi-transparante achtergrond) en reserveer het volledige glaseffect voor desktop waar GPU-vermogen doorgaans voldoende is. Glassmorfisme testen over verschillende contenttypes achter het glas onthult hoe robuust je implementatie is. Test met tekstcontent, afbeeldingen, video's, effen kleuren, gradiënten en gemengde content die achter het glaspaneel passeert. Elk contenttype produceert verschillende vervagingresultaten. Dichte tekst achter glas creëert een grijze vervaging. Kleurrijke afbeeldingen creëren levendige, verschuivende kleuren. Video creëert constant veranderende vervaging. Je glaspaneel moet tekstleesbaarheid en visuele aantrekkingskracht behouden over al deze scenario's, of je moet beperken welke content achter glaselementen kan verschijnen. Glassmorfisme gecombineerd met matte-zijbalk-patronen creëert een onderscheidende applicatielay-out. Een glas-zijbalk over het hoofdcontentgebied biedt navigatie zonder de content volledig te verbergen. Over de zijbalk hoveren of deze uitbreiden onthult meer van het glaseffect. Dit patroon werkt goed voor dashboards en admin-panelen waar de zijbalk een secundair element is. Implementeer het met een vast of sticky zijbalk-element dat de glasstijlen draagt, gepositioneerd over het hoofdcontentgebied met passende z-index. CSS-alleen-alternatieven voor backdrop-filter bestaan voor oudere browsers of prestatie-beperkte situaties. Een pseudo-element (::before) gepositioneerd achter de content kan een vervaagde kopie van de achtergrond dragen met background-attachment: fixed met dezelfde achtergrondafbeelding als de pagina, plus een CSS-filter: blur(). Deze benadering vervaagt geen daadwerkelijke content achter het element (het vervaagt een vaste achtergrondafbeelding in plaats daarvan), dus het werkt alleen voor vaste achtergronden, niet dynamische content. Ondanks deze beperking produceert het een overtuigend glaseffect met betere browserondersteuning en prestaties dan backdrop-filter, omdat de vervaging eenmaal wordt toegepast op een statische afbeelding in plaats van elk frame opnieuw berekend. De glassmorfisme-generator-tool laat je achtergrondkleur, ondoorzichtigheid, vervagingsstraal, rand en schaduw in realtime aanpassen terwijl je het resultaat over een voorbeeldachtergrond bekijkt. Kopieer de gegenereerde CSS direct in je stylesheet. Begin met de gegenereerde waarden als basislijn en verfijn ze daarna in context met je daadwerkelijke achtergrond en content. De generator handelt de syntaxis af, waaronder het -webkit-voorvoegsel voor Safari-compatibiliteit en de @supports-fallback voor browsers zonder backdrop-filter-ondersteuning.
Veelgestelde vragen
Wat is glassmorphism?
Glassmorphism is een UI-ontwerptrend met doorzichtige, op matglas lijkende elementen met achtergrondblur en subtiele randen.
Werkt glassmorphism in alle browsers?
De eigenschap backdrop-filter wordt ondersteund in alle moderne browsers, waaronder Chrome, Firefox, Safari en Edge.
