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.
Open 24 built-in tools from your browser sidebar, use quick actions from the right-click menu, and reach every RizCraft tool without hunting through tabs.
Firefox and Edge versions are coming next. Free to install
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.
-webkit- prefixed version
alongside the standard property to render the blur — including both covers every modern browser.
backdrop-filter blurs whatever is
behind the element, whether that's a photo, a gradient, or other page content.
Tell us what to improve or which tool to add next.