Glassmorphism CSS Generator
Design a frosted-glass UI card and copy the CSS.
background: rgba(255, 255, 255, 0.2); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.3);
How to use the Glassmorphism CSS Generator
- 1 Adjust blur, background transparency and tint color over the colorful backdrop preview.
- 2 Set the border opacity and corner radius to complete the glass look.
- 3 Copy the generated CSS (background, backdrop-filter and border) into your stylesheet.
Examples
- ▸ A translucent frosted card over a photo or gradient hero background.
- ▸ A glass-style navigation bar that blurs the content scrolling behind it.
Frequently asked questions
What CSS property creates the glassmorphism effect?
The key property is backdrop-filter: blur(), which blurs whatever is behind an element, combined with a semi-transparent background color and a subtle light border to sell the "frosted glass" look.
Does backdrop-filter work in every browser?
It is supported in all current major browsers (Chrome, Edge, Firefox and Safari), though very old browser versions may ignore it and simply show the semi-transparent background without the blur.
Why does my glass card look invisible or flat?
Glassmorphism needs something visually busy behind it — a photo, gradient or colorful background — to blur. Over a plain solid background, the blur has nothing to show, so the effect can look flat.
What makes a glassmorphism design feel "right"?
Low background opacity (around 10–20%), a generous blur, a thin semi-transparent white border, and soft rounded corners together create the light, layered depth the style is known for.