How to Create a Glassmorphism Effect in CSS
Updated 2026-06-21
A glassmorphism effect in CSS is built from four ingredients: a semi-transparent background, a backdrop-filter: blur() that frosts whatever is behind the element, a faint 1px border to catch light at the edge, and a soft shadow for depth. Layer those over a colorful background and you get the frosted-glass card popularized by macOS and Windows 11.
The core CSS recipe
Start with these properties on the card you want to frost:
- background: a low-opacity white or color, around 10–20% alpha (for example rgba white at 0.12).
- backdrop-filter: blur(12px) plus the -webkit-backdrop-filter prefix for Safari — this is the property that actually blurs the layer behind the element.
- border: 1px solid with a low-opacity white (around 0.18 alpha) to define the glass edge.
- border-radius: 12–20px, since glass cards almost always have rounded corners.
- box-shadow: a large, soft, dark shadow to lift the card off the page.
The blur amount is the dial that matters most. Around 8–14px reads as clean frosted glass; push past 25px and content behind it disappears entirely. The background opacity controls how "thick" the glass feels — lower alpha looks like a thin sheet, higher looks like milk glass.
Two pitfalls to avoid
You need something behind it. backdrop-filter blurs the pixels behind the element, so glass over a plain white page shows nothing. Place the card over a photo, a gradient, or overlapping shapes — otherwise the effect is invisible.
Safari needs the prefix, and old browsers need a fallback. Always include -webkit-backdrop-filter. For browsers that don't support backdrop-filter at all, set a more opaque solid background as a fallback so text stays readable.
Glass, shadow, or neumorphism
The same surface principles produce three related looks, and the Glassmorphism & Shadow UI tool covers all of them:
- Glassmorphism — transparency plus backdrop blur, as above.
- Ambient shadows — layered, soft box-shadows that mimic real diffused light for a floating effect.
- Neumorphism — a same-color surface with one light and one dark inset/outset shadow, so the element looks extruded from the background. This needs a matching background color and breaks if the surface color and page color differ.
Generate and copy the code live
Hand-tuning rgba alphas and blur radii by trial and error is slow. With Glassmorphism & Shadow UI you drag sliders for blur, opacity, border, radius, and shadow, watch the result update against a real backdrop, and copy the finished CSS — or the equivalent Tailwind utility classes — straight into your project.
Everything runs in your browser. Nothing you design is uploaded, so you can paste in brand colors or in-progress UI without anything leaving your device.
Ready to skip the guesswork? Open the Glassmorphism & Shadow UI tool, dial in your frosted card, and grab the CSS.