Glassmorphism Generator
What backdrop-filter does
Glassmorphism is a frosted-glass panel: a translucent fill with a blur applied to whatever sits behind it. It is built with backdrop-filter, which filters the backdrop rather than the element, so the content on the panel stays perfectly sharp.
Syntax
backdrop-filter: blur(<radius>) saturate(<amount>) brightness(<amount>);| Part | What it controls |
|---|---|
| blur() | The frosting itself. Around 12–20px reads as glass; much more and the backdrop becomes an abstract wash. |
| saturate() | Pushed above 100%, it restores the colour that blurring drains away. This is what separates convincing glass from grey plastic. |
| brightness() | Lifts or drops the backdrop behind the panel, useful for keeping text legible over a busy photo. |
| background | A translucent fill over the blur, typically white or a dark tint at 10–30% alpha. Without it the panel has no surface. |
| border | A hairline at slightly higher alpha than the fill simulates the lit edge of a glass pane. |
Notes from practice
It needs something behind it
backdrop-filter has no visible effect over a flat background. Glass only reads as glass over a photo, a gradient or overlapping shapes.
Watch the contrast
Blurring a busy image still leaves varying luminance behind your text. Raise the fill opacity or drop brightness until the contrast badge in the preview passes AA.
It is expensive to composite
Each backdrop-filter layer forces the browser to re-filter the region behind it on every paint. Fine for a card or a nav bar; avoid it on dozens of elements or inside a scrolling list.
Glassmorphism Generator FAQ
How do I create a glassmorphism effect in CSS?
Combine three things on one element: a translucent background such as rgb(255 255 255 / 0.16), a backdrop-filter of blur(16px) saturate(180%), and a hairline border at slightly higher alpha. The element must sit over a photo or gradient for the blur to have anything to work with.
What is the difference between filter and backdrop-filter?
filter applies to the element and its contents, so text on it blurs too. backdrop-filter applies only to what is painted behind the element, leaving the element's own content sharp. Glassmorphism needs backdrop-filter.
Does backdrop-filter work in all browsers?
It is supported in current Chrome, Edge, Firefox and Safari, though Safari needs the -webkit- prefix, which this generator adds for you. For older browsers, turn on the fallback toggle: it emits a more opaque solid fill first and wraps the blur in @supports (backdrop-filter: blur(1px)).
Why is my backdrop-filter not working?
The three usual causes are a flat background with nothing to blur, a parent with overflow: hidden and no stacking context, and a missing -webkit- prefix in Safari. It also has no effect if the element's own background is fully opaque, since nothing behind it shows through.
Is glassmorphism bad for performance?
It can be. Every backdrop-filter region is re-composited whenever anything behind it changes, so a handful of panels is fine but a long list of them will drop frames, especially on mobile. Keep it for surfaces that sit above content, like nav bars, modals and cards.
Related generators
- Filter — Combine blur, colour adjustments and drop-shadow on any element. Defaults are left out of the output.
- Blend Modes — Blend stacked backgrounds with background-blend-mode, or blend an element into what is behind it with mix-blend-mode.
- Neumorphism — Soft extruded or pressed surfaces from two opposing shadows tinted off the base colour.
- Box Shadow — Stack up to three shadow layers, mix inset and outer shadows, and tune colour and opacity.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.