🧊 CSS Glassmorphism Generator
Design a frosted-glass panel, blur, transparency, border and shadow, and copy the CSS. The preview shows the glass over a colourful background.
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);How the css glassmorphism generator works
Glassmorphism is the frosted-glass look: a translucent panel that blurs whatever sits behind it. The effect comes from a semi-transparent background colour plus backdrop-filter: blur(), usually with a subtle light border and a soft shadow to lift the panel. This generator exposes the blur amount, background transparency, border and radius, previews the panel over a colourful backdrop so the blur is visible, and writes the CSS. It is generated in your browser and ready to paste.
backdrop-filter needs something behind the element to blur, so the effect only shows over content or a busy background, not over a plain flat colour that matches the panel. Some browsers historically needed the -webkit-backdrop-filter prefix; the generator can include it for wider support. Heavy blur can affect performance on large areas.
Frequently asked questions
What is glassmorphism?
Glassmorphism is a UI style of frosted-glass panels: translucent backgrounds that blur the content behind them, with a thin light border and soft shadow. It creates depth and a premium, layered feel, popularised by modern operating systems.
How is the frosted-glass effect made in CSS?
With a semi-transparent background (for example rgba(255,255,255,0.15)) plus backdrop-filter: blur(10px). The blur frosts whatever is behind the panel; the transparency lets colour through; a 1px light border and soft shadow complete the look.
Why is my glass effect not showing?
backdrop-filter only blurs content behind the element. If the panel sits over a plain colour with nothing behind it, there is nothing to blur. Place it over an image or busy background, and make sure the background colour is actually semi-transparent.
Does backdrop-filter work in all browsers?
It is supported in all current major browsers, though some older versions needed the -webkit-backdrop-filter prefix. The generator can output both for maximum compatibility.
Is my design uploaded?
No. The CSS is generated locally in your browser.