Glassmorphism CSS Generator

Design frosted-glass cards with backdrop-blur and copy the CSS.

Blur: 8pxTransparency: 0.15Saturation: 120%Radius: 16pxBorder Opacity: 0.3

Glassmorphism

Frosted glass card

Presets:

Blur (8px)

Transparency (0.15)

Saturation (120%)

Border Radius (16px)

Border Opacity (0.3)

CSS Code

background: rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.3);

The glassmorphism effect

Glassmorphism is the frosted-glass look popularised by macOS and Windows — a translucent panel that blurs whatever sits behind it. The magic is backdrop-filter: blur(), combined with a semi-transparent background, a subtle light border, and a soft shadow for depth. Tune the sliders and copy the CSS. Remember to include the -webkit- prefix for Safari, and make sure there is something colourful behind the element or the blur has nothing to work with.

Pair it with the gradient generator for the backdrop, the box-shadow generator, or the filter generator.

Built and maintained by Meet Shah · Last updated 18 July 2026

What this tool is used for

Producing a frosted-glass card over a background image.
Tuning blur and transparency against a live preview.
Getting the border and shadow that make the effect read as glass.
Comparing blur amounts to find the point where text over the panel stays readable.
Producing a translucent panel for a dark theme.

Frequently Asked Questions

What makes the glass effect?: Three things together: a semi-transparent background, `backdrop-filter: blur()` to blur what is behind it, and a subtle light border to catch the edge. Remove any one and it stops reading as glass — the border in particular is what separates a panel from a smudge.
Why does my glass panel look like a flat colour?: Almost always because the background is fully opaque, so there is nothing to blur through. The effect also needs something varied behind it — over a flat colour the blur has nothing to distort, and the panel is indistinguishable from a lighter rectangle.
Is it expensive to render?: Yes, comparatively. The browser rasterises everything behind the element and re-blurs it whenever that content moves, so glass over a scrolling region repaints continuously. One fixed navbar is fine; a grid of twelve glass cards over a parallax background is where frame rate collapses.
How do I keep text on glass readable?: By not relying on the blur. Blurring reduces detail while preserving average brightness, so light text over a blurred light photograph is still illegible. Add a tint in the direction you need and measure the result against a contrast checker rather than judging by eye.
Does it work everywhere?: Support is now broad, but Safari still needs `-webkit-backdrop-filter` and Firefox only enabled it by default relatively recently. Design the panel so that losing the blur degrades to a plain translucent card rather than to unreadable text.

Common errors and gotchas

Placing text on the panel without checking contrast against whatever scrolls behind it.
Relying on `backdrop-filter` without a fallback, since support and performance vary.
Forgetting the panel needs a translucent background for the blur to be visible.
Using it on a large area, which is expensive to composite.
Assuming the effect reads over a plain background, when it needs something behind it.