Glassmorphism Generator
Adjust sliders to craft the perfect backdrop-filter card,
then copy production-ready CSS in one click.
background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30);
Glass Preview
Resize sliders to see blur, transparency and border in real-time.
The Glassmorphism Trend
Popularised by Apple's macOS Big Sur in 2020, the frosted-glass aesthetic
has become a staple of modern SaaS and mobile design. The key property is
backdrop-filter: blur() — which applies
a blur to whatever renders behind the element, not the element itself.
Pair it with saturate() to boost the colours
peeking through the glass, and a rgba()
background with low alpha for the tint.
Frequently Asked Questions
What is Glassmorphism?
A UI design style using backdrop-filter: blur()
and semi-transparent backgrounds to simulate frosted glass. Mainstream since iOS 13 and Windows 11.
Does this work on all browsers?
The generated CSS includes both backdrop-filter
and -webkit-backdrop-filter for Safari.
Supported by Chrome 76+, Safari 9+, Firefox 103+, and Edge 17+ — covering 97 %+ of users.
What does the saturation slider do?
It adds a saturate() function to
backdrop-filter, amplifying the colours
visible behind the glass — the same trick Apple uses in macOS and iOS panels.
Is this tool free?
Yes. 100% free for personal and commercial projects, no attribution required.