How do I use the CSS Glassmorphism?

backdrop-filter works best over a colorful background image Add -webkit-backdrop-filter for Safari/iOS support Keep opacity between 0.1 and 0.25 for the sweet spot

Is the CSS Glassmorphism free and private?

Yes — it runs in your browser, requires no signup for basic use, and your data never leaves your device. Glassmorphism was popularized by Apple's macOS Big Sur in 2020 and Microsoft's Fluent Design System before it.

DevTools Surf

CSS Glassmorphism

Generate frosted-glass UI — backdrop-filter blur + transparent bg

1 credit

blur=… opacity=… color=R,G,B radius=…

Glass CSS

Related CSS Tools

Minify CSS CSS Beautifier CSS Formatter CSS Pretty Print CSS to LESS CSS to SCSS CSS to SASS CSS to Stylus