Glassmorphism CSS: Hoe maak je UI met glaseffect

Glassmorphism werd een van de bepalende UI-trends van de vroege jaren 2020. Het matglaseffect creëert een gevoel van diepte en doorschijnendheid dat modern en premium aanvoelt.

De CSS-implementatie vereist drie ingrediënten: backdrop-filter voor de vervaging, rgba voor transparantie en een semi-transparante rand.

Wat is glassmorphism

Glassmorphism is een designstijl gekenmerkt door doorschijnende oppervlakken met een matglaseffect. Belangrijke visuele eigenschappen: achtergrondtransparantie (30-50% dekking), achtergrondvervaging (8-32px), subtiele rand (1-2px, semi-transparant wit).

backdrop-filter: blur() syntax

backdrop-filter past grafische effecten toe op de inhoud achter een element. De blur()-functie vervaagt de achtergrond: backdrop-filter: blur(12px). In tegenstelling tot filter: blur() dat het element zelf vervaagt, vervaagt backdrop-filter alles achter het element.

rgba en transparantie

Het glasoppervlak gebruikt rgba() voor de achtergrondkleur met lage alpha: background: rgba(255, 255, 255, 0.15). De alpha-waarde (0.15-0.25) bepaalt hoe transparant het oppervlak is.

Border met rgba

Een kenmerkende eigenschap van glassmorphism is de semi-transparante rand die licht vangt. Gebruik: border: 1px solid rgba(255, 255, 255, 0.3). De rand simuleert licht dat weerkaatst op de rand van glas.

Browserondersteuning en fallbacks

backdrop-filter wordt ondersteund in alle moderne browsers sinds 2022. Gebruik @supports (backdrop-filter: blur(1px)) om glassmorphism alleen toe te passen waar het wordt ondersteund.

Prestatieoverwegingen

backdrop-filter is rekenintensief en kan de prestaties op complexe pagina's of mobiele apparaten beïnvloeden. Beperk het aantal elementen met backdrop-filter en test op apparaten met lagere prestaties.

Veelgestelde Vragen