Glassmorphism Generator

Create frosted glass effect CSS

Live Preview

Glassmorphism Effect

This is how your glass card will look

Glass Properties

Blur10px

Transparency25%

Border Opacity18%

Saturation180%

Brightness120%

Presets

CSS Code

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px) saturate(180%) brightness(120%);
-webkit-backdrop-filter: blur(10px) saturate(180%) brightness(120%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 12px;

Browser Support

• Chrome/Edge: Full support ✓
• Safari: Full support ✓
• Firefox: Requires flag in older versions
• Use -webkit-backdrop-filter for Safari
• Works best on colorful backgrounds

Enjoying this tool?

Support us to keep building free tools!

Secure payment via Stripe • No account required