CSS-glassmorphism-generator

Wat is CSS-glassmorphism-generator?

De CSS-glassmorphism-generator is een gratis visuele editor voor de matglas-UI-stijl (glassmorphism), gemaakt voor front-endontwikkelaars en productontwerpers. Pas de mate van vervaging, de transparantie van het oppervlak, de kleurverzadiging, de randdikte, de hoekradius en de schaduwsterkte aan met getalvelden en schuifregelaars, en kies vervolgens een tintkleur met het kleurvak. Een voorbeeldpaneel toont het glaspaneel in realtime over een levendige verloopachtergrond, en de volledige CSS — met backdrop-filter, een halftransparante achtergrond, een subtiele rand en een box-shadow — wordt gegenereerd om te kopiëren. Gebruik het om glasachtige kaarten, navigatiebalken, modals en overlays te bouwen zonder de rgba-alpha met de hand bij te stellen of het voorvoegsel -webkit-backdrop-filter te onthouden.

CSS-glassmorphism-generator gebruiken

1. Stel de Vervaging (in px) in om te bepalen hoe sterk het gebied achter het paneel wordt vermat.
2. Verlaag de Transparantie om het glas doorzichtiger te maken, of verhoog die voor een steviger oppervlak.
3. Zet de Verzadiging boven 100% om de achtergrondkleuren door het glas heen te laten opvallen.
4. Kies een tintkleur met het kleurvak en pas de Randbreedte, Radius en Schaduw aan om de look af te maken.
5. Kijk hoe het voorbeeld over de achtergrond in realtime wordt bijgewerkt terwijl je elke waarde wijzigt.
6. Kopieer de gegenereerde CSS naar je stylesheet — die bevat al de -webkit-backdrop-filter-fallback.

Voorbeelden

vervaging 12, transparantie 25%, verzadiging 120%, radius 16, rand 1, schaduw 24

backdrop-filter: blur(12px) saturate(120%); background: rgba(255, 255, 255, 0.25); …

vervaging 8, transparantie 60%, verzadiging 100%, radius 0, rand 1, schaduw 8

backdrop-filter: blur(8px) saturate(100%); background: rgba(255, 255, 255, 0.6); …

tint #0f172a, vervaging 20, transparantie 30%, verzadiging 140%, radius 24, schaduw 40

backdrop-filter: blur(20px) saturate(140%); background: rgba(15, 23, 42, 0.3); …

Veelgestelde vragen

Wat doet backdrop-filter?

backdrop-filter past grafische effecten toe — hier vervaging en verzadiging — op alles wat achter het element zit, en dat is wat de matglas-look creëert. De generator geeft zowel backdrop-filter als het voorvoegsel -webkit-backdrop-filter uit zodat het in alle browsers werkt, plus een halftransparante achtergrond, een rand en een schaduw.

Waarom is er een transparantieregelaar?

Het glaseffect heeft een gedeeltelijk doorzichtige achtergrond nodig zodat de vervaagde achtergrond doorschijnt. De Transparantie-schuifregelaar stelt de alpha van de achtergrondkleur van het paneel (rgba) in: lagere waarden zijn transparanter, hogere waarden zijn ondoorzichtiger en vaster.

Kan ik gekleurd of donker glas gebruiken?

Ja. Kies een willekeurige tintkleur met het kleurvak — de tool mengt die in de rgba-achtergrond, zodat je warm, koel of donker glas kunt maken. Combineer een donkere tint met hogere transparantie voor sfeervolle overlays, of houd het wit voor een klassiek matglaspaneel.

Werkt het in elke browser?

De meeste moderne browsers ondersteunen backdrop-filter. De gegenereerde CSS bevat het voorvoegsel -webkit-backdrop-filter voor Safari en oudere Chromium, maar heel oude browsers negeren het en tonen simpelweg de halftransparante achtergrond zonder de vervaging.

Worden mijn gegevens ergens geüpload?

Nee. De generator draait volledig in je browser met JavaScript — je kleuren en waarden worden nooit naar een server gestuurd, dus hij werkt privé en zelfs offline zodra de pagina is geladen.