Glassmorphism Generator

How to use it

1. Move Blur to set how strongly the backdrop behind the card is smeared. Around 12 to 20 px reads as frosted glass.
2. Set Transparency for the tint layer. Low values show more of the backdrop; high values turn the panel milky.
3. Raise Saturation above 100 percent when the blur washes the colours out of the backdrop.
4. Adjust Border width and Border opacity. A hairline light border is what separates glass from a plain translucent box.
5. Pick a Tint color, then copy the CSS. The snippet includes an @supports fallback that swaps in a solid background.

Common use cases

• Overlay panels on hero images — frosted cards keep text readable over photography without hiding the image.
• Sticky navigation bars — a translucent bar that blurs the page as it scrolls past.
• Modal and dialog surfaces — a glass panel reads as a layer above the page rather than a flat rectangle.
• Pricing and feature cards — a light tint over a gradient background adds depth without extra artwork.
• Prototyping a design direction — settle the numbers here before writing them into design tokens.

Why it stays private

The preview is painted by your browser and the CSS is generated from the slider values. Nothing is uploaded, so unfinished design work stays on your device.

FAQ

Q: Why does the preview need a busy background? A: backdrop-filter has nothing to blur over a flat colour. The preview uses a gradient and colour shapes so the blur is actually visible.

Q: Does it work in Firefox? A: Current Firefox supports backdrop-filter. Older engines ignore it, which is why the snippet ships the @supports fallback with a solid background.

Q: Why does the text still look light on a dark backdrop? A: The preview card keeps white text so it stays visible over the sample gradient. Adjust the text colour to match your own palette.