Glassmorphism-generator
Maak matglazen UI-kaarten met achtergrondvervaging, transparantie en randen, en kopieer de CSS.
Glaskaart
Matglas dat over een felle achtergrond zweeft.
—
Genereert zowel backdrop-filter als -webkit-backdrop-filter. Let op: backdrop-filter wordt niet ondersteund in oudere browsers (bijv. Firefox onder 103); voeg voor die browsers een effen terugvalachtergrond toe.
Over Glassmorphism-generator
De Glassmorphism Generator bouwt het matglaseffect: een doorschijnend paneel dat alles vervaagt wat erachter zit. Schuifregelaars bepalen de vervaging en verzadiging van de backdrop-filter, de tintkleur van het glas en de transparantie ervan, de randkleur en -dekking, de hoekradius en een schaduw eromheen — elke wijziging wordt live weergegeven op een levendige achtergrond, zodat je het effect realistisch kunt beoordelen.
Vier kwaliteitspresets — subtle, frosted, vivid en dark glass — bieden bewezen combinaties om mee te beginnen. De dark-preset laat zien hoe hetzelfde recept zich aanpast aan donkere interfaces, waar een lichte, flauwe rand het grootste deel van het werk doet om het glas van de achtergrond te scheiden.
De gegenereerde CSS bevat zowel backdrop-filter als het -webkit-backdrop-filter-voorvoegsel dat Safari vereist. Let op de compatibiliteitskanttekening: oudere browsers (bijvoorbeeld Firefox vóór versie 103) ondersteunen backdrop-filter niet, dus voorzie een solide fallback-achtergrond voor hen.
Hoe gebruik je Glassmorphism-generator
- Begin met een preset — subtle, frosted, vivid of dark glass — of met de standaardwaarden.
- Pas de vervaging en verzadiging van de backdrop filter aan.
- Stel de tintkleur van het glas en de transparantie ervan in.
- Verfijn de randkleur, randdekking, hoekradius en buitenste schaduw.
- Kopieer de CSS — deze bevat al de met -webkit- voorvoegde eigenschap voor Safari.