About the CSS Glassmorphism Generator
What is glassmorphism?
Glassmorphism is the frosted pane look, where a panel blurs whatever sits behind it while staying partly see-through. It went mainstream with macOS Big Sur and Windows 11, and it's held on because it does something useful. A blurred backdrop separates a panel from a busy background without hiding that background entirely, so the page keeps its depth.
The effect is four or five declarations working together, and it collapses if any one of them is wrong. You need backdrop-filter for the blur, a semi-transparent background so there's something to see through, and usually a faint light border to suggest the edge of the pane. Get the tint too opaque and it stops being glass. This tool shows the panel over a genuinely busy background, because that's the only way to judge it. A glass panel over a flat color looks fine no matter what you set.
How to Use This Tool
- Pick a preset. Classic is the standard recipe. Heavy frost, Light touch, Dark glass and Tinted cover the usual variations.
- Set the blur. Between 8px and 20px is the useful range. Below about 4px the background stays readable through the panel and fights your text.
- Push the saturation. Blurring averages colors toward gray, so lifting saturation above 100% puts the life back in.
- Tune the tint. White for light glass, a dark navy for dark glass. Keep the opacity low, roughly 0.1 to 0.3.
- Add the border. A hairline at low opacity is what makes the edge read as a physical pane.
- Copy it. CSS, an SCSS mixin, a Tailwind class or a JS style object.
Common Use Cases
Glass works when there's something worth seeing behind it, and it's wasted when there isn't.
- Navigation bars: A sticky header that blurs the content scrolling under it, which keeps the page feeling continuous.
- Modals and dialogs: The panel blurs the page behind it instead of dimming it flat.
- Cards over a hero image: Text stays readable while the photograph still shows through.
- Media controls: Player bars over video, which is where the effect started.
- Sidebars and docks: A blurred rail over a colorful workspace.
Two more worth a look, the CSS Filter Generator covers the same blur applied to the element itself, and the CSS Box Shadow Generator handles the lift. Or browse all our free developer tools.
Frequently Asked Questions
Why is my glass panel not blurring anything?
Nearly always because the background is fully opaque. backdrop-filter only affects what's visible behind the element, so if your background color has no alpha there's nothing showing through to blur. The second common cause is that there genuinely is nothing behind it, such as a panel sitting directly on a flat body color, in which case blurring a solid color produces the same solid color.
Do I need the -webkit- prefix?
Yes, include it. Safari supported backdrop-filter for years only under -webkit-backdrop-filter, and plenty of installed browsers still need it. The prefixed line costs nothing and this tool emits both. Put the prefixed one first so the standard property wins wherever it's understood.
Is glassmorphism bad for accessibility?
It can be, and this is the effect's real weakness. Text on glass sits over a background you don't control, so its contrast ratio changes as the page scrolls or the image changes. That makes it hard to guarantee the 4.5:1 that body text needs. The practical fix is to raise the tint opacity until the worst-case background is safe, or to keep the panel over a region you know is dark or light. Never assume the blur alone gives you enough contrast.
What does saturation do here?
Blurring mixes neighboring pixels together, and mixing lots of colors pulls them toward gray. Adding saturate(140%) to the backdrop filter pushes that color back out, which is why real system UIs do it. Without it, frosted glass over a vivid photo looks strangely washed out, and most tutorials leave this step out.
Does it hurt performance?
It can, more than most CSS. The browser has to sample and blur a live region of the page on every frame it changes, so a large glass panel over animated or scrolling content is genuinely expensive, especially on low-end phones. Keep the blurred area as small as you can, avoid animating the blur radius, and be careful with a full-width sticky header on a long scrolling page.
What happens where it isn't supported?
The blur is skipped and you're left with just the semi-transparent background color, which usually looks thin and hard to read. If that matters, wrap the transparent background in an @supports (backdrop-filter: blur(1px)) block and give unsupporting browsers a more opaque fallback color instead.
