Glassmorphism is easy to describe and fiddly to get right. A single backdrop-filter gets you a blur, but the thing that makes glass read as glass is the edge: a bright hairline along the top, a softer one down the left, a faint inner glow, and a shadow underneath that lifts the panel off the page. Miss those and you have a grey rectangle.
This generator exposes the three values worth touching and leaves the rest of the snippet alone. Drag blur value for how frosted the background is, refraction for how milky the surface tint is, and depth for how thick the glass feels. One slider moves one number, the CSS updates as you drag, and you copy it when it looks right.
Open the generator- Live preview over three backgrounds
- Three independent sliders
- Copy-paste CSS, no build step
- Safari -webkit- prefix included
- Subtle, frosted and liquid presets
- Free, no signup, no attribution
What does each slider actually change?
One number each, which is deliberate. Blur value is the backdrop-filter radius, from a barely-there haze at 4 to a heavy frost at 40. Refraction is the alpha of the white surface tint: at 0.15 you get rgba(255, 255, 255, 0.15), and pushing it up makes the glass milkier and less see-through. Depth is the spread on the inner glow, the 10px in inset 0 0 20px 10px, which pushes a soft white halo in from the edges and is what makes the panel read as a thick slab rather than a flat sheet. Every other value in the snippet is fixed, so dragging one slider only ever moves one thing.
Why does my glass look like a grey box?
Because there is nothing behind it. backdrop-filter blurs whatever it overlaps, so on a plain white section it has nothing to sample and you get a faintly tinted rectangle. Glass needs contrast and colour behind it: a photo, a gradient, or a few overlapping blurred colour blobs. The generator gives you three backgrounds precisely so you can see this happen.
What about browser support and Safari?
Every current browser supports backdrop-filter, but Safari still expects -webkit-backdrop-filter alongside it, and the generator always emits both. Anything old enough to ignore the property entirely just shows the semi-transparent background, which degrades gracefully. Worth testing on an actual iPhone though, because Safari renders the blur slightly differently to Chrome.
Is it going to hurt performance?
It can. Blurring the backdrop is genuine GPU work, repeated whenever anything behind the element moves. One or two glass panels are fine on any device. A grid of twelve, or a glass header that stays fixed while a long page scrolls, will drop frames on mid-range Android phones. Treat it as an accent for a card, a modal or a nav bar, not as a background style you apply everywhere.
Does glassmorphism cause accessibility problems?
Frequently, and it is the part people skip. Reducing the contrast between your text and its background is the entire point of the effect, which puts you on a collision course with WCAG's 4.5:1 requirement for body text. If you use it behind copy, raise the background alpha, keep text off the busiest part of the image, and check the result with a contrast tool rather than your eye.
Sensible starting values
Where the presets sit, and what each is good for. Blur is in pixels, refraction is an alpha from 0 to 1, depth is the inner-glow spread in pixels.
| Look | Blur | Refraction | Depth | Use it for |
|---|---|---|---|---|
| Subtle | 10 | 0.08 | 3 | Nav bars and sticky headers over content |
| Frosted | 20 | 0.15 | 10 | Cards, modals and pricing panels |
| Liquid | 30 | 0.28 | 24 | Hero features and marketing showcases |
Fair questions.
What is glassmorphism?
A visual style where a panel looks like frosted glass: the background shows through, blurred, with a bright edge catching the light. It came to prominence with macOS Big Sur and iOS control centres, and it works best over something worth blurring, a photo or a colourful gradient, rather than a flat white page.
Does backdrop-filter work in every browser?
In every current one, yes. Chrome, Edge, Safari and Firefox all support backdrop-filter now. Safari still wants the -webkit- prefix, which this generator always includes. Very old browsers ignore it entirely and simply see the semi-transparent background, which is a perfectly acceptable fallback.
Why does my glass card look like a plain grey box?
Almost always because there is nothing behind it to blur. backdrop-filter samples whatever sits underneath, so over a flat white section it has nothing to work with. Put the card over a photo, a gradient or overlapping colour blobs and the effect appears immediately.
Is backdrop-filter bad for performance?
It is not free. The browser has to sample and blur everything behind the element on every frame, which is real GPU work. One or two glass panels on a page is fine. Twenty, or one that animates while the page scrolls, will cost you frames on mid-range phones. Use it as an accent, not a background style.
What do the three sliders actually change?
Each one maps to a single number in the CSS, which is the point. Blur value is the backdrop-filter radius in pixels. Refraction is the alpha of the white background tint, so 0.15 means rgba(255, 255, 255, 0.15). Depth is the spread of the inner glow, the last number in inset 0 0 20px 10px, which is what gives the panel a sense of thickness. Everything else in the snippet stays exactly where it is.
Can I use this in Tailwind or a React project?
Yes. The output is plain CSS with no dependencies, so it drops into a stylesheet, a CSS module, a styled-component, a Tailwind @layer, or a Framer code component. Rename the class to whatever suits your codebase.
Is the generated CSS free to use?
Completely. No attribution, no licence, no signup. Copy it into a client project and bill for it if you like. It is CSS, not intellectual property worth guarding.
Why does the text inside my glass card look muddy?
Contrast. Frosted glass reduces the contrast between your text and whatever is behind it, which is an accessibility problem as much as an aesthetic one. Keep text on the more opaque areas, raise the background alpha, or add a subtle solid panel behind the text itself. WCAG still expects 4.5:1 for body copy.
Go and make some glass.
Three sliders, a live preview, and CSS on your clipboard in under a minute.
Open the generatorWant more? There are 305+ free click-to-copy CSS components in our resources library, including a full set of glass buttons.