Tools
Glassmorphism Generator
Frosted-glass panels with backdrop-filter blur, a soft tint and a light
border. Tune it over a real backdrop and copy the CSS. Runs entirely in your browser.
Frosted glass
backdrop-filter does the work.
About glassmorphism
Glassmorphism is the frosted-glass look popularized by modern OS design: a translucent panel that blurs
whatever sits behind it. The effect comes from backdrop-filter: blur() combined with a
semi-transparent background and a subtle 1px light border that catches the "edge" of the glass.
Two things make or break it. First, it only reads as glass when there's something colorful
behind it to blur — flip the backdrop above to feel the difference. Second, keep the panel
background's alpha low (around 0.15–0.3) so the blur shows through. Note that
backdrop-filter is GPU-accelerated but still costs more than a flat fill, so use it for a few
hero panels rather than every card.
Add lift with a soft stack from the box-shadow generator.