What the glassmorphism generator does
Glassmorphism is the frosted-glass look: a translucent panel that blurs whatever sits behind it, with a faint border and a soft shadow so it reads as a sheet of glass floating over the page. It became mainstream with macOS Big Sur and Windows 11 and is now a standard card and modal style. This generator lets you set the blur, transparency, tint colour, border and corner radius with a live preview and gives you the CSS to paste. Everything runs in your browser.
The CSS behind the effect
.glass {
background: rgba(255, 255, 255, 0.15); /* translucent tint */
backdrop-filter: blur(12px) saturate(140%); /* blur what is behind */
-webkit-backdrop-filter: blur(12px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.3); /* light edge */
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* lift off the page */
}backdrop-filter does the real work: it applies a filter to the content behind the element rather than to the element itself. The translucent background lets the blurred backdrop show through; the light border simulates the refracted edge of glass; saturate keeps the blurred colours from going grey.
Settings that look right
| Property | Typical range | Notes |
|---|---|---|
| blur() | 8–20 px | Under 6 px looks smeared rather than frosted; over 30 px hides the backdrop entirely |
| Background alpha | 0.1–0.3 (light glass), 0.2–0.5 (dark glass) | Higher alpha means more contrast for text, less glass |
| Border | 1 px, white at 0.2–0.4 alpha | Essential — without it the panel has no edge |
| Border radius | 12–24 px | |
| Shadow | 0 8px 32px rgba(0,0,0,.1–.2) | Soft and large; a hard shadow breaks the illusion |
| saturate() | 120–180% | Optional; compensates for blur desaturation |
It only works over something
Glass over a flat white page is invisible — there is nothing to blur. The effect needs a colourful, varied backdrop: a photo, a gradient, blurred blobs, or other UI elements scrolling beneath a fixed header. The generator's preview uses a gradient background for this reason; on your page, make sure the element sits over content with some variation, and test on both the lightest and darkest areas it can appear over.
Readability and accessibility
- Text on glass has variable contrast because the backdrop changes. Check contrast against the worst region of the backdrop, and raise the background alpha or add a subtle text shadow if it fails WCAG 4.5:1.
- Keep glass for containers — cards, navbars, modals — not for body text areas that must be read at length.
- Respect
prefers-reduced-transparency: give those users a solid background. - Dark glass (black tint at 0.3–0.5) is usually easier to read on than light glass over busy images.
Browser support and performance
backdrop-filteris supported in all current browsers; Safari needs the-webkit-prefix, which the generator includes. Firefox added it in version 103 (2022).- Provide a fallback for browsers without support: inside
@supports not (backdrop-filter: blur(1px)), give.glassa nearly opaque background such asrgba(255,255,255,.85). - Blur is GPU-intensive. A few glass panels are fine; dozens, or large panels over animated content, can drop frame rates on low-end phones. Avoid animating the blur radius.
- Sticky or fixed glass headers over scrolling content are the classic use and perform well.