Glassmorphism Generator
Build frosted glass effects with backdrop-filter and transparency
Build frosted glass effects with backdrop-filter and transparency
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px) saturate(150%);
-webkit-backdrop-filter: blur(12px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;Glassmorphism is a UI style that makes panels look like frosted glass — a semi-transparent surface with a blurred view of whatever sits behind it. The effect relies on three CSS properties working together: a translucent background-color (usually rgba() or an oklch() with alpha), a backdrop-filter: blur() to soften the content behind the element, and a faint border or inner shadow to define the glass edge against its surroundings.
Glassmorphism needs something visible behind the panel to blur — a flat background defeats the purpose. It shines over colorful gradients, photos, or busy dashboards. Common use cases: modals and dialogs, floating command palettes, nav bars over hero images, and iOS-style notification cards.
-webkit-backdrop-filter alongside the unprefixed property to support older Safari versions.backdrop-filter is GPU-accelerated but not free — avoid applying it to large, constantly repainting regions.@supports not (backdrop-filter: blur(1px)) for the last few unsupported browsers.