Skip to main content
DevStackKit
All tools

Glassmorphism Generator

Create a frosted-glass CSS effect with blur, transparency, saturation and border. Code includes the -webkit- prefix and a fallback. Free and private.

More options

CSS

.glass {
background: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(12px) saturate(160%);
backdrop-filter: blur(12px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
}

/* browsers without backdrop-filter get a more solid background so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass {
background: rgba(255, 255, 255, 0.85);
}
}

Shortcuts: Ctrl+Enter run · Ctrl+Shift+C copy result · / search (use ⌘ on Mac)

Next steps

Done here? Use the Send to… menu on the result to carry it on to CSS Effects Generator or CSS Minifier.

Free Glassmorphism Generator

Design a frosted-glass card and copy the CSS. The code includes the prefixed property and a safe fallback so the text stays readable in older browsers. It gives developers a quick browser-based way to solve a focused glassmorphism generator task before moving the result into a project.

How to use Glassmorphism Generator

Move the sliders until the card looks right over the colourful background, then copy the CSS. Put the glass element over an image or gradient: blur needs something behind it.

Common mistakes

  • Putting the glass over a flat colour: there is nothing to blur.
  • Using a high background opacity: the blur is hidden. Try 10 to 40.

Frequently asked questions

Why do I need the -webkit- version?
Safari needed -webkit-backdrop-filter for years and some older versions still do. The code includes both, so it works everywhere backdrop-filter is supported.
What happens in a browser without backdrop-filter?
The @supports block makes the background more solid, so the text is still easy to read.
Why can I not see any blur?
Backdrop blur blurs what is behind the element. Put it over an image, a gradient or other content, and keep the background opacity low.
Is anything uploaded?
No. The code is built in your browser and nothing is sent to a server.
How do I use this glassmorphism generator tool?
Use the interactive controls above; processing stays in your browser and the result is intended as a practical starting point for development work.

More Frontend & Design

User-Agent ParserSee which browser and device a visitor usesSVG OptimizerMake SVG images smallerColor ConverterConvert colours between HEX, RGB and HSLColor Blindness SimulatorSee how colour-blind people see your designCSS Effects GeneratorCreate gradients and shadows visuallyMeta Tag / Open Graph PreviewPreview how your page looks on Google and socialImage Resizer / CropperResize photos, including passport sizeBase64 Image ConverterTurn an image into text code, and back

View all Frontend & Design tools →