Design a frosted-glass card — color, blur, opacity, and border — and copy ready-to-use CSS.
Browser support note: backdrop-filter
is supported in all current evergreen browsers, but older versions (notably older Firefox releases)
don't support it. Always set a fallback background-color so the card still looks
reasonable where blur isn't available.
Glassmorphism is a frosted-glass UI style: a semi-transparent panel with a blurred backdrop and a subtle
light border. This generator builds the three CSS properties that make the effect work together —
background, backdrop-filter, and a matching -webkit-backdrop-filter
for Safari — plus an optional translucent border, which noticeably improves the effect.
Toggle Show content on glass to preview how real text sits on top of the panel before you commit to a blur and opacity combination.
Safari needs the -webkit- prefixed version
alongside the standard property to render the blur — including both covers every modern browser.
No — backdrop-filter blurs whatever is
behind the element, whether that's a photo, a gradient, or other page content.
A thin, same-color translucent border catches light along the edge, which is what makes the panel read as "glass" rather than just a blurred rectangle.
Tell us what to improve or which tool to add next.
