How to create a glassmorphism effect
- Adjust Blur to set how frosted the glass is, and Transparency for how much of the glass color shows.
- Raise Saturation to make the colors behind the glass more vivid, and set a subtle border and radius.
- Test on shapes, a gradient, a light background or your own photo.
- Copy the CSS class and apply it to cards, navigation bars, modals or overlays.
How glassmorphism works
The effect relies on backdrop-filter, which blurs and adjusts whatever is behind an element rather than the element itself. Combined with a semi-transparent background and a thin light border that mimics the edge of glass, it produces the frosted look made popular by macOS, iOS and Windows 11. The -webkit- prefixed line is still needed for Safari.
Glass only looks like glass when there is something colorful behind it: on a flat background it is just a faint box. Use it over gradients, photos or blurred shapes, as in the preview. Watch readability: text on glass needs enough contrast against the brightest and darkest parts of the background, so increase the opacity or add a darker tint when in doubt. Heavy blur over large areas can be slow on low-end phones, so keep blurred elements reasonably small.
backdrop-filter is supported by all current browsers. The generator runs locally, and photos you use are not uploaded.
Why doesn't the blur show?
The element must be semi-transparent and placed over other content. Check that nothing between the card and the background has an opaque background.
Does glassmorphism work in Firefox?
Yes. Firefox has supported backdrop-filter by default since version 103.
Is glassmorphism accessible?
It can be if text contrast stays above 4.5:1. Respect users who enable "reduce transparency" by offering an opaque fallback in a media query.