What is glassmorphism?

Glassmorphism is a UI design trend that uses frosted-glass style panels — translucent backgrounds with a blur effect, subtle border, and soft shadow — to create depth and layering over colourful backgrounds.

Which browsers support backdrop-filter?

backdrop-filter is supported in Chrome 76+, Edge 79+, Safari 9+ (with -webkit- prefix), and Firefox 70+. For maximum compatibility the generator outputs both the -webkit-backdrop-filter and standard backdrop-filter properties.

Why doesn't the glass effect show on a white background?

Glassmorphism requires a colourful or image background behind the element for the blur and transparency to be visible. On a white or single-colour background the effect is nearly invisible. Use the gradient presets to see the true result.

How do I adjust the glass colour tint?

The background opacity slider controls how much white (or a chosen colour) is mixed into the glass. Low opacity gives a very transparent look; higher opacity adds more tint. You can also tweak the generated background: rgba() value directly in your stylesheet.

Design 免费无需注册

CSS Glass Generator

Generate CSS glassmorphism effects with live preview and code export

正在加载工具…

关于此工具

Design stunning glassmorphism UI cards entirely in CSS. Adjust backdrop blur, background opacity, border opacity, border radius, and shadow strength using intuitive sliders. Choose from three gradient background presets — purple-blue, sunset orange-pink, and ocean teal-green — to see exactly how your glass effect looks against colourful content. The live preview shows a realistic glass card floating over the chosen background. Copy the generated CSS including backdrop-filter, background, border, border-radius, and box-shadow with one click.

使用方法

1 Choose a background scene preset (purple-blue, sunset, or ocean) from the selector.
2 Drag the Blur slider to set the backdrop-filter blur amount (0–40px).
3 Adjust Background Opacity to control how translucent the panel is.
4 Set Border Opacity for the glass edge highlight.
5 Change Border Radius to round the corners.
6 Increase Shadow Strength to add depth with a soft box-shadow.
7 Click 'Copy CSS' to copy the generated CSS to your clipboard.

关于此工具

使用方法

常见问题