Glassmorphism Generator
Design a frosted-glass card: adjust the blur, transparency, border and shadow while it floats over colorful backgrounds or your own image, then copy the CSS. A contrast check keeps the text readable.
Frosted glass
Content stays readable while the background shows through.
GlassmorphismYour browser does not support backdrop-filter, so the blur will not show here.
Presets:
How to create a glassmorphism effect
- Start from a preset, or move the sliders: Blur sets how frosted the glass is and Opacity how much color it has.
- Switch backgrounds, or upload your own, to see how the glass looks over different content. The effect only shows when there is something colorful behind it.
- Watch the contrast message, adjust the text color or opacity if needed, and copy the CSS.
How the glass effect works
The key ingredient is backdrop-filter: blur(), which blurs whatever is behind the element rather than the element itself. Combined with a semi-transparent background color, a thin light border and a soft shadow, it looks like frosted glass floating above the page. Raising the saturation keeps colors behind the glass vivid instead of washed out.
The -webkit-backdrop-filter line is still needed for Safari. All current versions of Chrome, Edge, Firefox and Safari support the effect; in an old browser without it, the card simply shows as a translucent panel.
Keep it readable and fast
- Text on glass changes with whatever is behind it, so test it over the busiest part of your background. Aim for at least 4.5:1 contrast for body text.
- Increase opacity or blur if text is hard to read, or add a subtle text shadow.
- Backdrop blur is heavy on graphics hardware. Use it for a few cards or a navigation bar, not dozens of elements, and avoid animating it.
Need a different tool? Suggest it here — we read every message.
Frequently asked questions
Why can’t I see the blur?
Blur only shows when there is something behind the element to blur, such as an image or gradient. On a plain white page the glass looks like a faint panel.
Does glassmorphism work in all browsers?
Yes in current Chrome, Edge, Firefox and Safari. Keep the -webkit- prefixed line for Safari.
Is the contrast check exact?
It is an estimate based on the glass color over a typical part of the background. Check the real page with the Color Contrast Checker, especially over bright or busy areas.
Can I use it on a navigation bar?
Yes, it is a common use: make the nav position: sticky with a glass background, and page content blurs as it scrolls underneath.
Is anything sent to a server?
No. Everything is calculated in your browser, and nothing you enter leaves your device.