Glassmorphism Generator

Design stunning frosted-glass UI elements with real-time backdrop filtering and export the CSS directly.

Live Environment

Glassmorphism

Beautiful frosted visual hierarchies that securely refract light directly inside your browser.

Native CSS

background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px) saturate(150%);
-webkit-backdrop-filter: blur(10px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 1rem;

Tailwind Classes

bg-[rgba(255,255,255,0.15)] backdrop-blur-[10px] backdrop-saturate-[150%] border border-white/20 rounded-2xl

Refraction Properties

Blur Radius10px

Tint Opacity15%

Saturation150%

Border Edge Opacity20%

Tint Color

#ffffff