▢

Glassmorphism Generator

Create frosted-glass card CSS with blur, transparency, saturation and a tint color.

Your files stay on this device

Files are processed in your browser, never uploaded. The site downloads code and assets to run the tools. No accounts or trackers.

Use Download to save this tool as one HTML file for offline use.

blur: 10px

transparency: 0.25

saturation: 180%

tint

result

output

About this tool

Adjust blur, transparency, saturation and tint to design a frosted-glass card and copy its CSS, all in your browser.

Why does the preview sit on a gradient?

Glassmorphism relies on a colorful backdrop so the blur and transparency are visible behind the card.

What does backdrop-filter do?

It blurs and saturates whatever is behind the element to produce the frosted-glass effect.