Glassmorphism Generator

Maak een matglazen oppervlak

Glassmorphism werkt doordat de achtergrond zichtbaar blijft door een doorschijnend oppervlak, terwijl een vervaging verzacht wat erachter zit. Het resultaat kan verzorgd en modern ogen als je het met mate gebruikt. Deze glassmorphism generator geeft je directe controle over de belangrijkste onderdelen: tint, transparantie, achtergrondvervaging, randdekking, afronding en schaduw. Terwijl je de waarden aanpast, wordt de kaart bijgewerkt boven een kleurrijk verloop, zodat je kunt beoordelen of het glaseffect zichtbaar is zonder de inhoud moeilijk leesbaar te maken.

De gegenereerde CSS bevat background, backdrop-filter, de bijbehorende eigenschap met WebKit- voorvoegsel, een subtiele rand, afronding en schaduw. Die declaraties zijn genoeg voor een herbruikbare kaart, navigatiepaneel, modal, hero-overlay of dashboardwidget. Omdat het effect pure CSS is, zijn er geen afbeeldingen om te exporteren en geen serververwerking. De browser rendert de voorvertoning en de kopieerknop zet de CSS-tekst op je klembord.

Transparantie en leesbaarheid in balans brengen

De meest voorkomende glassmorphism-fout is de kaart te transparant maken. Een lage dekking kan er op een lege voorvertoning indrukwekkend uitzien, maar echte koppen, labels en pictogrammen hebben genoeg contrast nodig om op elke achtergrond leesbaar te blijven. Verhoog de dekking als de achtergrond druk is, verlaag haar als de achtergrond eenvoudig is, en gebruik de rand om het oppervlak te scheiden van gelijkaardige kleuren. Vervaging helpt om details achter de kaart te verminderen, maar vervangt geen contrasttest.

Waar je het effect gebruikt

Matglas werkt het best voor gerichte momenten: een prijskaart boven een hero-verloop, een zwevende werkbalk, een profieloverzicht of een modal boven rijk beeldmateriaal. Het wordt rommelig als elk onderdeel het tegelijk gebruikt. Test de gekopieerde CSS na afloop in de echte lay-out en voeg een effen achtergrond als terugval toe als je oudere browsers of zeer zwakke apparaten ondersteunt. Een sterke glaskaart moet gelaagd aanvoelen terwijl de hiërarchie van de interface en de inhoud duidelijk blijven.