Glassmorphism Generator

Create the frosted glass effect with a glassmorphism generator

Glassmorphism is the frosted-glass look made popular by macOS Big Sur, Windows 11’s acrylic surfaces and countless dashboard and landing-page designs: a translucent panel that blurs whatever sits behind it, with a thin light edge and a soft shadow. The Glassmorphism Generator lets you build that effect visually and copy production-ready CSS.

Move the sliders for blur, fill opacity, saturation, border opacity, shadow and corner radius, choose a tint colour, and watch a sample card update over vivid gradients, light or dark scenes, a neutral checkerboard — or your own photo. The CSS includes the -webkit- prefix Safari needs and an @supports fallback for browsers that cannot blur, so the card stays readable everywhere.

How to use the Glassmorphism Generator

1. Start from a glass style: Frosted, Clear, Dark glass or Tinted.
2. Pick a background swatch above the preview, or press “Image” to use your own picture (you can also drop a file onto the preview).
3. Adjust Blur, Fill opacity and Saturation until the background reads as softly frosted; then tune Border opacity, Shadow and Corner radius.
4. Change the tint colour and switch Card text between Light and Dark to check legibility.
5. Press “Copy CSS” and add the .glass class to your own element.

Glassmorphism Generator features

The four ingredients of glassmorphism

Adding saturate() above 100% makes the colours seen through the glass richer, which is why frosted surfaces in operating systems look vivid rather than washed out.

• A translucent fill — usually white or a tint at 10–30% opacity, so the background shows through.
• A backdrop blur — backdrop-filter: blur() blurs everything behind the element (not the element itself). 8–20px suits most cards.
• A light edge — a 1px semi-transparent white border imitates light catching the edge of glass and separates the card from similar colours behind it.
• Depth — a soft, wide shadow lifts the card off the page. Build more elaborate shadows with the Box Shadow Generator.

Browser support and the fallback

backdrop-filter is supported in Chrome and Edge 76+, Firefox 103+ and Safari — with the -webkit- prefix since Safari 9 and without it since Safari 18. Older browsers simply ignore the property, which would leave a nearly transparent card with unreadable text on a busy background.

The generated @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) block solves that by switching to a much more opaque version of the same tint only where blurring is unavailable. Keep it in your stylesheet even if you target modern browsers: some users disable transparency effects, and embedded web views lag behind.

Accessibility and performance tips

• Text on glass sits on an unpredictable background. Check the worst case — the lightest and darkest parts behind the card — with the Contrast Checker, and raise the fill opacity until body text passes WCAG AA (4.5:1).
• Use glass for a few surfaces such as a navigation bar, a modal or a hero card, not for every element. Each blurred layer costs GPU time, especially on low-end phones.
• Avoid animating blur values or placing large glass panels over video; both force expensive repaints.
• A colourful background is essential: glass over a flat white page just looks grey. Generate one with the Gradient Generator.