Glassmorphism Effect Generator
Maak verbluffende glasachtige UI-effecten met backdrop-filter, blur en transparantie.
① Pas blur en dekking aan ② Kies glaskleur en rand ③ Kopieer de CSS
Glassmorphism
backdrop-filter: blur(12px)
Presets:
12px
18%
180%
30%
16px
CSS-code
.glass {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;
}Wat is Glassmorphism?
Glassmorphism is een UI-ontwerptrend die een matglas-uiterlijk creëert met CSS backdrop-filter, semi-transparante achtergronden en subtiele randen. Belangrijke CSS-eigenschappen: backdrop-filter: blur(12px) saturate(180%) vervaagt de achtergrond. background: rgba(255,255,255,0.18) stelt de doorschijnende vulling in. border: 1px solid rgba(255,255,255,0.3) voegt de glasrand toe. Safari vereist -webkit-backdrop-filter. Voeg altijd een @supports-fallback toe voor oudere browsers.
Veelgestelde Vragen
Glassmorphism is een UI-stijl die matglas simuleert met CSS backdrop-filter met blur, semi-transparante gekleurde achtergronden en dunne doorschijnende randen.
De kerneigenschappen zijn: backdrop-filter: blur(10px), background: rgba(255,255,255,0.15), border: 1px solid rgba(255,255,255,0.3).
backdrop-filter wordt ondersteund in Chrome, Firefox 103+, Edge en Safari (met -webkit-prefix). Voeg altijd beide versies toe voor maximale compatibiliteit.
Gebruik @supports: @supports not (backdrop-filter: blur(1px)) { .glass { background: rgba(255,255,255,0.9); } }
Glassmorphism vereist inhoud ACHTER het glaselement. Op een effen achtergrond is er niets om te vervagen. Plaats het element over een afbeelding of verloop.
Waarden tussen 8px en 20px creëren het meest natuurlijke glasuiterlijk. 10–16px is het veelvoorkomende optimum.
Voeg box-shadow toe: box-shadow: 0 8px 32px rgba(0,0,0,0.15). Combineer interne (inset) met externe schaduwen voor een overtuigend glaspaneeleffect.