Design frosted glass effects in real time — copy the CSS instantly.
A frosted-glass surface that blends beautifully with any background.
glassmorphismWhat is it?
Glassmorphism is a UI design trend that mimics frosted glass — translucent surfaces with a blur effect that lets the background bleed through. First popularized in Apple's macOS Big Sur (2020) and later embraced by designers worldwide, it creates depth and hierarchy without heavy shadows or opaque cards.
The effect is achieved in CSS with backdrop-filter: blur() combined with a semi-transparent background. When layered over colorful or gradient backgrounds, the result is striking — light refracts through the surface, creating a soft, airy aesthetic.
How to use
Adjust the sliders to tune your glass effect in real time. Blur controls how frosted the surface feels — higher values create a heavier, more opaque look. Background Opacity sets how transparent the card is against the scene behind it.
Try different Background Scenes to test your glass against light, dark, and colorful backdrops. Once you're happy, hit Copy CSS and drop it straight into your project.
Pro Tips
Glassmorphism needs colorful, gradient, or image-heavy backgrounds to shine. It looks flat on solid colors.
backdrop-filter is GPU-intensive. Avoid stacking many glass layers — keep it to 2–3 per screen.
A slightly brighter top border simulates light reflection and gives the glass surface a more realistic, polished look.
Always include -webkit-backdrop-filter for Safari. backdrop-filter is supported in all modern browsers.
Glassmorphism CSS Generator — free to use, no signup required.
Built by yungfika.com