How to use the Glassmorphism Generator
- Choose a preview background and, if you like, a starting preset such as Frosted or Dark.
- Adjust blur, background opacity and saturation until the card looks like frosted glass over the colors behind it.
- Set the border opacity, corner radius, shadow strength and tint color, and type your own class name.
- Press Copy CSS and apply the class to a panel that sits over an image, gradient or other colorful content.
Features
- Live backdrop-filter preview over four backgrounds
- Blur, opacity, saturation, border, radius, shadow and tint
- Five starting presets, including dark glass
- Safari -webkit- prefix included automatically
- @supports fallback for browsers without backdrop-filter
- Custom class name in the generated CSS
What glassmorphism is
Glassmorphism is an interface style built from translucent panels that blur whatever sits behind them, like frosted glass. A typical glass element combines four ingredients: a semi-transparent background, a background blur, a thin light border that catches the “edge” of the glass, and a soft shadow that lifts it off the page. The style became widely popular around 2020 and appears in operating systems, dashboards and landing pages.
You are looking at an example right now. ToolsWorld’s own design is glassmorphic: the header, menus, search dialog and the panel around this tool use real backdrop blur over a soft, colorful background, while smaller cards use translucency alone.
How the CSS works
The key property is backdrop-filter. Unlike filter, which changes the element itself, backdrop-filter changes what can be seen through the element. blur() softens the content behind, and saturate() above 100% makes those blurred colors richer, which keeps glass from looking washed out. The background color must be partly transparent, otherwise there is nothing to see through.
Safari has long required the -webkit-backdrop-filter prefix and older versions still need it, so the generated CSS lists both. For browsers with no support at all, an @supports not block switches to a more opaque background so text stays readable even without the blur.
Recommended settings
| Setting | Good starting range | Why |
|---|---|---|
| Blur | 10–20px | Enough to hide detail without turning colors to mush |
| Background opacity | 15–35% (light), 30–50% (dark) | Lets color through while giving text a surface |
| Saturation | 140–200% | Keeps blurred colors vivid |
| Border opacity | 20–40% | Defines the edge on busy backgrounds |
| Corner radius | 12–28px | Soft corners suit the glass look |
Accessibility and readability
Because the background shows through, text contrast changes as the content behind it moves. Test your text color against both the lightest and darkest areas that can appear behind the panel with the Contrast Checker. If it fails, raise the background opacity or tint the glass darker. Avoid glass over detailed photographs for long passages of text, and keep important controls on more solid surfaces.
Performance tips
Backdrop blur is computed by the graphics processor every time the content behind it changes, so dozens of blurred elements, or blur on elements that scroll over video, can slow older phones. Reserve real blur for a few large surfaces such as headers, sidebars and dialogs, and give small repeated cards plain translucency instead, the same approach this site uses. A colorful backdrop is essential: glass over a flat white page just looks gray. Build one with the CSS Gradient Generator and finish the panel with a shadow from the Box Shadow Generator.
Frequently asked questions
Why can’t I see any blur on my page?
Backdrop blur only affects what is behind the element. Make sure the background color is partly transparent and that there is colorful content, such as an image or gradient, behind the panel.
Does glassmorphism work in all browsers?
Current versions of Chrome, Edge, Safari and Firefox support backdrop-filter. The generated CSS adds the -webkit- prefix for Safari and a solid fallback for any browser without support.
Is backdrop-filter bad for performance?
It is more demanding than ordinary styles because the blur is recalculated as content moves. A few blurred panels are fine; many small blurred elements can slow down older phones.
How do I make dark glass?
Choose a dark tint color and raise the background opacity to around 35–50%, or start from the Dark preset. Use light text and keep the border subtle.
What is the difference between opacity and background opacity?
The opacity property fades the whole element, including its text. Glassmorphism uses a transparent background color instead, so the text stays fully solid.