Glassmorphism Generator
Frosted-glass CSS with backdrop blur, transparency and border, plus a fallback.
About this tool
Adjust the blur, transparency, saturation, border strength, corner radius, shadow and tint colour, and watch the glass card update over a choice of colourful backgrounds. The CSS includes the -webkit- prefix for Safari and an @supports fallback for browsers without backdrop-filter.
How to get glassmorphism right
Glassmorphism is the frosted-glass style used in macOS, Windows 11 and iOS: a translucent panel that blurs whatever sits behind it. The core is backdrop-filter: blur(), which blurs the content behind an element rather than the element itself. All current major browsers support it, though Safari still needs the -webkit- prefix. A semi-transparent white or tinted background, usually 10–30% opacity, gives the frosting. Boosting saturation keeps colours rich through the blur, a thin translucent border catches the light along the edge, and a soft shadow separates the panel from the page. The effect only works with something colourful or detailed behind it, such as gradients, photos or shapes. Over a flat background it just looks grey. Readability is the main risk. Check the contrast of text over the busiest part of the background, and use a darker tint, a stronger blur or a subtle text shadow if needed. Blur is also expensive to draw, so avoid stacking many blurred layers on low-powered phones. The @supports fallback swaps in a nearly solid panel for browsers that can't blur. The neumorphism generator, the CSS gradient generator and the box-shadow generator build related effects.
Frequently asked questions
What is glassmorphism in CSS?
A frosted-glass effect made with a semi-transparent background and backdrop-filter: blur(), usually with a thin light border and soft shadow.
Does backdrop-filter work in all browsers?
It works in current Chrome, Edge, Firefox and Safari (Safari with the -webkit- prefix). The generated @supports rule gives older browsers a solid fallback.
Why does my glass effect look grey?
There is nothing colourful behind it. Glassmorphism needs a vivid or detailed background to blur.
Is my design saved?
No. Everything runs in your browser and nothing is stored or sent.