CSS Glassmorphism Generator
Create frosted glass effects with CSS. Adjust blur, transparency, and saturation with live preview.
Preview
Glass Card
This is a glassmorphism effect preview
Settings
Presets
CSS Code
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);⚠️ Note: backdrop-filter may not work in all browsers. Safari requires the -webkit- prefix.
Design modern glassmorphism effects with our visual CSS generator. Control blur, transparency, saturation, and border opacity. Perfect for creating trendy glass-like UI elements.
Glassmorphism is the frosted-glass look popularized by macOS Big Sur and Windows 11 — a semi-transparent surface sitting over a blurred version of whatever's behind it, usually with a faint border to catch the edge light. It's built with backdrop-filter, a property most browsers now support, combined with a semi-transparent background and a 1px translucent border. The effect looks simple but depends on finely tuned blur radius, saturation boost, and background alpha — small changes read as plastic, too much reads as pea soup.
This generator lets you adjust blur strength, background opacity, saturation (which keeps the backdrop's colors punchy rather than muddy when blurred), and border opacity, all over a configurable background image so you can see the effect against realistic content. The output includes backdrop-filter and its -webkit- prefix for Safari, plus a fallback for browsers that don't support it.
Typical uses are navigation bars over scrolling content, modal overlays, card surfaces on top of photography, and mobile notification-style panels. The look fails on solid backgrounds — it needs visual complexity behind it to justify the blur.
- 1
Adjust blur and opacity
Dial in backdrop blur (typically 8-20px), background alpha (usually 0.1-0.3), and saturation boost (1.5-2 keeps colors from going grey). The preview sits over a sample background.
- 2
Tune the border
Add a 1px semi-transparent white border to catch the edge highlight that real glass has. Without it the surface reads as flat transparent film.
- 3
Copy the CSS
Grab the full rule including backdrop-filter, -webkit-backdrop-filter for Safari, the semi-transparent background, and the border. Paste into your component's styles.
Navigation bars over content
Fix a header with glassmorphism so scrolling content blurs underneath — used by Apple.com, Stripe, and many modern marketing sites.
Modal and dialog overlays
Soften the page behind a modal with a blurred glass pane instead of a flat dark backdrop, preserving context while directing focus.
Cards on hero imagery
Overlay feature cards on a photographic hero section so they stay readable while the image still shows through.
Mobile notification panels
Replicate iOS-style frosted notification surfaces for web apps that mirror native mobile patterns.
Does backdrop-filter work in all browsers?
It works in every current Chrome, Safari, Firefox, and Edge. Safari needs the -webkit-backdrop-filter prefix in addition to the standard property. For older browsers, provide a solid fallback background so the surface stays readable.
Why doesn't my glassmorphism look like the preview?
It needs visually complex content behind it — the blur has nothing to operate on against a flat color. Put it over photography, gradients, or busy layouts. Also check that no parent has backdrop-filter: none or an opacity less than 1, both of which disable the effect.
How much blur should I use?
8-16px reads as subtle frosted glass, 20-40px as heavy frost. Above 40px the backdrop becomes so blurred it loses the sense of depth that makes the effect work. Pair higher blur with higher saturation to keep colors from going grey.
Is backdrop-filter expensive to render?
It's one of the heavier paint operations, especially on mobile GPUs. Use it on a few fixed surfaces, not on hundreds of scrolling cards. If you animate it, confine the animation to opacity or transform and keep the blur value static.
Why does my border look too harsh?
A fully opaque white border breaks the glass illusion. Use rgba(255, 255, 255, 0.1-0.2) for the border color — just enough to catch the edge highlight without asserting itself.