About this tool
Adjust blur, transparency, saturation and tint to design a frosted-glass card and copy its CSS, all in your browser.
Frequently asked questions
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.