Glassmorphism Generator

Create frosted-glass UI effects easily.

Create the popular frosted-glass effect for your UI elements.

Blur (10px)

Transparency (0.20)

Border Radius (16px)

Color

Preview

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);

Frequently Asked Questions

Glassmorphism Generator

Can you give an example?

What is Glassmorphism?

How do I use the generated CSS?

Why does it use `backdrop-filter`?