CSS Glassmorphism Generator
Create translucent, frosted-glass panels with a few sliders. Set the blur, the tint and its transparency, add a light border and a soft shadow, and copy CSS that includes the prefix Safari still needs.
- Runs in your browser
- No sign-up
- Free to use
Glass
Edge and shape
How to use CSS Glassmorphism Generator
- Start from a preset: frosted, clear, dark glass or tinted.
- Adjust the blur and the transparency of the tint until the background shows through pleasantly.
- Set the border opacity, corner radius and shadow.
- Copy the CSS and apply the class to an element that sits over an image or a gradient.
CSS Glassmorphism Generator features
Real backdrop blur
Uses backdrop-filter, which blurs whatever is behind the element.
Safari prefix included
The -webkit- prefixed property is written alongside the standard one.
Tint and saturation
Any tint colour with adjustable transparency, plus a saturation boost that keeps blurred colours lively.
Light edge
A semi-transparent border imitates the highlight on the edge of real glass.
Colourful test background
The preview sits over a vivid backdrop so the effect is visible while you adjust it.
Honest hints
Tells you when the settings no longer produce a glass effect.
When to use CSS Glassmorphism Generator
- Cards and panels over a hero image or gradient.
- Sticky navigation bars that let page content shimmer through.
- Modal dialogs and overlays with a softened background.
- Dashboard widgets on a colourful backdrop.
CSS Glassmorphism Generator FAQ
What is glassmorphism?
A visual style in which panels look like frosted glass: partly transparent, with the content behind them blurred, a thin light border and a soft shadow. It became widespread through recent operating system interfaces and works best over colourful or photographic backgrounds.
What does backdrop-filter do?
It applies a filter, such as blur, to the area behind an element, as seen through it. This differs from the filter property, which affects the element itself and its content. For the blur to be visible, the element's own background must be at least partly transparent.
Which browsers support it?
All current versions of Chrome, Edge, Firefox and Safari support backdrop-filter. Safari requires the -webkit- prefix, which is why both lines appear in the code. In a browser without support, the panel is simply shown with its semi-transparent background.
Why does the effect not show on my page?
The most common reasons: there is nothing interesting behind the element, since a plain background looks the same blurred; the element's background is fully opaque; or a parent creates a stacking context with its own background that hides what is behind.
Is text on glass readable?
It can be a problem. The background changes with the content behind the panel, so contrast varies. Use a stronger tint, a higher blur and sufficiently bold text, and check the result over the lightest and darkest parts of your background.
Does backdrop-filter affect performance?
Blurring is work for the graphics processor, more so for large areas and when the content behind the panel moves or scrolls. A few glass panels are fine; covering most of a long, animated page with them can make scrolling less smooth on weaker devices.
Building a convincing glass effect
Frosted glass in an interface is an illusion made of four ingredients. A translucent fill lets the background colours through. A backdrop blur diffuses them, so that text on the panel does not compete with detail behind it. A thin, light border catches the eye like the bright edge of a pane of glass. And a soft shadow lifts the panel off the surface. Remove any one and the effect weakens; the blur is the essential part.
The background matters as much as the panel. Glass over a flat colour is indistinguishable from a tinted box, since there is nothing to blur. The style comes alive over photographs, gradients and coloured shapes, which is why the preview uses a vivid backdrop. When designing with it, place glass panels where something colourful sits behind them, and plain panels elsewhere.
A modest saturation boost is a useful refinement. Blurring averages colours and tends to make them look washed out. Increasing saturation in the same backdrop-filter declaration restores their intensity, which is how operating systems achieve their vibrant translucent surfaces.
Legibility is the price of the style and deserves attention. Because the background is unpredictable, contrast cannot be guaranteed the way it can with a solid colour. Keep important text large and bold, increase the tint where needed, and test with real content behind the panel. Where precise readability matters, such as long text or dense data, a solid surface remains the better choice.