Glassmorphism Generator

Generate glassmorphism UI effects with blur, transparency & backdrop filters. Create trendy frosted glass designs with copy-paste CSS code.

Opacity: 20

Blur: 40

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
border: 1px solid rgba(255, 255, 255, 0.3);

BUTTON

Glassmorphism CSS Generator

Create the frosted glass effect popular in modern OS designs (like MacOS and Windows 11).

Pick & Convert Colors

Make CSS Gradients

Check Accessibility