About Glassmorphism
Glassmorphism is a UI design style that mimics frosted glass. Elements look like translucent panels floating above the page, with a soft blur behind them so whatever sits underneath shows through in diffuse, muted focus. Apple popularised the style in macOS Big Sur and iOS, and it now appears everywhere from the iOS Control Center to Windows 11's acrylic effects and countless modern web apps.
Making glassmorphism work is mostly about restraint. The card needs a semi-transparent background, a subtle light border, a soft shadow, and — most importantly — an interesting wallpaper behind it. A frosted-glass panel over a plain white page just looks washed out.
The CSS properties that create the effect
| Property | Purpose |
|---|---|
| backdrop-filter: blur(Npx) | Blurs whatever is behind the card |
| backdrop-filter: saturate(N%) | Boosts colour intensity of the blurred backdrop |
| background: rgba(r,g,b,a) | Semi-transparent panel fill |
| border: 1px solid rgba(...) | Subtle light "edge" of the glass |
| border-radius | Rounded corners, typically 16–24px |
| box-shadow | Soft drop shadow to lift the card |
Why the wallpaer matters so much
backdrop-filter samples the pixels behind the element and applies a graphical effect to them. If the pixels behind the card are plain white, blurring them produces — plain white. The effect only becomes visible when there is something visually interesting behind the card to blur:
- Gradient wallpapers — the classic choice; subtle shifts of colour read beautifully through glass.
- Photos — dramatic backdrops look premium but can hurt text contrast; use sparingly and always test readability.
- Coloured blobs or shapes — the modern "abstract gradient blob" style gives you full control over colour and keeps performance reasonable.
- Video — works, but the backdrop-filter must recompute every frame; avoid on low-end devices.
Values that work well
| Property | Typical range | Sweet spot |
|---|---|---|
| Blur | 4–24px | 10–14px |
| Background alpha | 0.10–0.40 | 0.15–0.20 (light wallpaper) |
| Border alpha | 0.15–0.40 | 0.25 |
| Border width | 0–2px | 1px |
| Border radius | 12–32px | 16–20px |
| Saturation boost | 100–200% | 150% |
| Shadow | 0 8px 32px rgba(31,38,135,.2) | — |
Common pitfalls
- Text unreadable. The background shifts behind the text as you scroll or as the wallpaper changes. Always test contrast against both the lightest and darkest regions of the backdrop. A subtle
text-shadowor an opaque inner sub-panel fixes most issues. - Too much glass. Stacking many glass cards makes each one fight for attention and slows rendering. Two or three at most per view.
- Ignore fallbacks. If
backdrop-filteris unsupported, the card still needs to look acceptable with just its semi-transparent background. Set a slightly higher alpha as a fallback. - Over-reliance on blur. Very high blur (30px+) makes the backdrop basically invisible and wastes GPU. 10–14px is almost always enough.
- No border. Without at least a 1px light border, the card edges can disappear into the background. The border is what sells the "glass" reading.
Common use cases
App UI overlays
Floating navigation and control panels.
Modal dialogs
Frosted overlays that keep the page visible behind.
Feature cards
Hero cards on gradient landing pages.
Media players
Controls floating over album art or video.
Dashboard widgets
Stats tiles over colourful backgrounds.
Login cards
Auth screens over abstract wallpapers.
Privacy and accuracy
This glassmorphism generator runs entirely in your browser. All generation happens locally in JavaScript with no server calls. The values you enter are never transmitted, stored or logged.