Glassmorphism Generator

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.

When it works

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.

Browser and performance notes

• Include -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.
• Maintain contrast against the blurred background — WCAG contrast rules still apply to text rendered over the glass.
• Provide a fallback solid background with @supports not (backdrop-filter: blur(1px)) for the last few unsupported browsers.