🧊 Glassmorphism Generator: Build Frosted Glass CSS in Seconds

What is the Glassmorphism Generator?

Glassmorphism, named by Michal Malewicz in 2020 after Apple leaned into translucent panels in macOS Big Sur and iOS, is built from three ingredients that only work as a set. First, a background color with low alpha, written as an rgba value, so the panel is see-through. Second, backdrop-filter: blur(), which blurs whatever sits behind the panel rather than the panel content itself, creating the frosted texture. Third, a thin, nearly-white, semi-transparent border with a soft drop shadow, which reads as the lit edge of a piece of glass. Remove any one of these and the illusion collapses: tint alone looks like a flat overlay, blur alone looks like a smudge, and border alone looks like an ordinary outlined box.

The key property, backdrop-filter, only does anything when there is something visually busy behind the element to blur, such as a gradient, a photo or overlapping shapes. Over a flat, solid background you will see the tint but no frosting, because there is nothing varied to soften. That is why this glassmorphism generator previews your card over a colorful gradient: it is the only honest way to judge the effect. A saturate() value is usually added alongside blur() because averaging pixels together pulls colors toward grey, so saturate(150%) to saturate(200%) restores the punch that the blur washed out. You can stack more functions in the same declaration, for example blur(12px) saturate(180%) brightness(110%) contrast(105%), and they apply left to right.

A detail that trips up almost everyone: backdrop-filter creates a new stacking context and only samples what is painted behind the element inside its own containing context. If an ancestor has overflow: hidden, its own filter, a transform, or certain opacity values, the blur can silently sample only that ancestor's background instead of the page behind it, so your card looks tinted but never frosted. The usual fixes are to move the glass panel out of the clipped parent (a portal or a sibling absolutely positioned element), or to remove the filter or transform on the ancestor. Rounded corners also need care: put border-radius on the same element that carries the backdrop-filter, not only on a wrapper, or the frosted area will spill past the curve in some engines.

Browser support is now broad. Chrome has supported backdrop-filter unprefixed since version 76, Edge since 79, Firefox since version 103 (July 2022, when it was enabled by default), and Safari since version 9 behind the -webkit- prefix, with unprefixed support arriving in Safari 18. Because a meaningful share of installed iOS devices still run older Safari builds, keep the prefixed line. Check current figures on caniuse.com (https://caniuse.com/css-backdrop-filter) and the property reference on MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) rather than trusting any number quoted in a blog post. Where support is missing, the panel simply falls back to its rgba background with no frosting, so choose a tint opacity that still looks deliberate on its own. You can gate enhancements with @supports (backdrop-filter: blur(1px)).

Performance is the real cost. backdrop-filter forces the browser to snapshot the region behind the element, run a blur over it, and recomposite on every frame in which anything underneath changes, which is why a sticky frosted header over a scrolling page is one of the most expensive things you can ask a low-end phone to do. A couple of glass surfaces are fine. Dozens of overlapping ones, or a large blurred region that repaints during scroll, will drop frames. Keep the blurred area small, avoid animating the blur radius (animate opacity or transform instead), and profile on a real mid-range device rather than a desktop.

Accessibility deserves equal weight. Text sitting on a translucent panel inherits contrast from whatever happens to be behind it, which can change as the user scrolls, so a card that passes the WCAG 2.2 minimum of 4.5:1 for body text (3:1 for large text and UI components) over one part of a photo can fail badly a few hundred pixels down. Test against the worst-case backdrop, not the prettiest one. Raise the tint opacity, add a solid scrim behind text, or increase font weight until it passes. Heavy blur and transparency also cause discomfort for some users with vestibular or visual sensitivities, so respect prefers-reduced-transparency and prefers-reduced-motion by shipping a solid-background fallback. The Nielsen Norman Group guidance on glassmorphism (https://www.nngroup.com/articles/glassmorphism/) is a useful check before you commit to the style for critical UI.

When to use it

• Designing a frosted navigation bar or hero card that floats over a photo or gradient background.
• Building login modals, pricing cards or dashboard widgets in a modern glass UI style.
• Creating glass buttons and tooltips that sit on top of vivid imagery without hiding it.
• Prototyping a glassmorphism design quickly and exporting the exact CSS for your project.
• Matching a design handoff by dialing in the exact blur and tint opacity a mockup used, then copying the values back into Figma or your CSS file.
• Teaching or reviewing how backdrop-filter behaves, by changing one value at a time and seeing the result immediately over a busy backdrop.

How to use the Glassmorphism Generator

1. Set the blur amount to control how frosted the glass looks. Start near 10px and adjust from there.
2. Adjust transparency (tint opacity) so the background shows through to the degree you want, usually 10% to 25%.
3. Pick a tint color and a background color, then raise saturation if the blurred backdrop looks washed out.
4. Tune the border and shadow strength until the panel reads as a lit glass edge lifted off the page.
5. Watch the live card update over the colorful backdrop, then press Copy to grab the generated CSS.
6. Paste the CSS onto your element and confirm it has a gradient or image behind it, not a flat color.

Formula & method

Worked examples

Suggested glassmorphism settings by use case

CSS properties used in glassmorphism

Browser support for backdrop-filter (verify current data at caniuse.com/css-backdrop-filter)

Common mistakes to avoid

• Using a solid or flat background behind the glass. backdrop-filter only frosts content that sits behind the element. Over a flat color there is nothing varied to blur, so you see the tint but no glass effect. Place glass panels over gradients, photos or overlapping shapes.
• Forgetting the -webkit- prefix. Safari needed -webkit-backdrop-filter until version 18, and plenty of installed iOS devices are still on older builds. Omitting it means the frosted effect silently fails for those users. This generator outputs both lines so you stay covered.
• Making the tint too opaque. If the background opacity is too high the panel becomes nearly solid and the see-through quality is lost. Keep tint opacity low (often 10% to 25% for light glass) and let the blur do the work.
• Ignoring text contrast against the worst-case backdrop. Light text on a translucent panel can fall below the WCAG 4.5:1 body-text minimum depending on what happens to be behind it, and that changes as the user scrolls. Test against the brightest and busiest part of the background, not the flattering part, then raise the tint or add a scrim behind text.
• Trapping the glass inside a clipped or filtered parent. An ancestor with overflow: hidden, a transform, or its own filter creates a stacking context, so the blur samples only that ancestor rather than the page behind it. The card looks tinted but never frosted. Move the panel outside the clipped wrapper or remove the ancestor filter.
• Blurring huge or animated regions. A large frosted area that repaints during scroll, or an animated blur radius, is one of the most expensive things you can render on a mid-range phone. Keep the blurred region small and animate opacity or transform instead of the blur value.

Glossary

Glassmorphism

A UI style using translucent, blurred panels with a light border to mimic frosted glass. Named around 2020 and popularised by macOS Big Sur and iOS.

backdrop-filter

A CSS property that applies graphic effects such as blur to the area behind an element, not its own content.

filter

The sibling property that applies the same effects to the element itself, including its text and children. Using it instead of backdrop-filter blurs your own content by mistake.

rgba

A color value with red, green and blue channels plus an alpha (opacity) channel from 0 (clear) to 1 (solid).

Blur radius

How far the backdrop blur spreads, in pixels. Higher values give a more heavily frosted look and cost more to render.

Saturation

A filter that boosts or reduces color intensity behind the glass, keeping colors lively at high blur.

Stacking context

An isolated painting layer created by properties like transform, filter, opacity or overflow. backdrop-filter can only sample what is painted behind it within its own context.

@supports

A CSS feature query that runs a block of rules only when the browser understands a given declaration, used to give unsupported browsers a solid fallback.

prefers-reduced-transparency

A media query that reports when the user has asked their system to reduce translucency, a signal to serve a solid panel instead of glass.

Frequently asked questions