Glassmorphism Generator

Create frosted-glass cards for hero sections, modals, and feature panels with live CSS.

Preview

Glass UI

Premium dashboard card

Use this style for overlays, hero callouts, or pricing panels on modern static sites.

background: rgba(255, 255, 255, 0.16);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.26);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);

Controls

Blur18px

Radius24px

Shadow24px

Background Transparency0.16

Border Opacity0.26