Glassmorphism CSS.

Genereer visueel frosted-glass CSS-effecten voor je UI.

Blur Amount

Transparency

Border Opacity

Preview Box

Stel drie sliders in — vervaging, transparantie en randdekking — en zie het effect realtime updaten op een kleurrijke achtergrond. Tevreden? Kopieer de kant-en-klare CSS naar je stylesheet.

Zo gebruik je het

Gebruik de sliders voor Blur, Transparency en Border Opacity. De preview update live. Kopieer de CSS uit het tekstvak onderaan.

Voorbeelden

Subtle glass blur(6px) · opacity 0.15 · border 0.08

Standard frosted blur(10px) · opacity 0.20 · border 0.10

Heavy frost blur(24px) · opacity 0.35 · border 0.20

FAQ

Why doesn't the effect look like glass on my site?

Glassmorphism requires a colourful or image-based background behind the element. On a plain white background, the blur has nothing to act on and the effect isn't visible.

Is backdrop-filter supported in all browsers?

Yes — in all modern browsers (Chrome, Firefox, Safari, Edge). The generated CSS includes the -webkit- prefix for Safari automatically.

Gerelateerde tools

Privacy en gegevensverwerking

Deze tool draait volledig in je browser. Niets wat je typt of plakt wordt naar een server gestuurd — alle verwerking gebeurt lokaal op je apparaat.