TTULAKITO
Designer

Glassmorphism Generator

Build frosted glass cards with backdrop-filter CSS.

All tools

Controls

Glass card

CSS

background: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 16px;

Frequently asked questions

Why isn't my backdrop-filter working in Firefox?
Firefox required the layout.css.backdrop-filter.enabled flag until version 103. Modern Firefox supports it natively, but always include -webkit-backdrop-filter for Safari and older WebKit browsers.
What makes glassmorphism look believable?
A semi-transparent background (around 10-30% opacity), a 10-20px backdrop blur, a 1px light border to suggest a glass edge, and a colorful or textured background behind it so the blur has something to do.
Is glassmorphism accessible?
Frosted backgrounds can wreck text contrast as the underlying content changes. Test the worst-case background underneath your glass panel against WCAG 4.5:1, or add a solid overlay to guarantee legibility.