Glassmorphism Generator

Create frosted-glass (Glassmorphism) cards with backdrop-filter, live preview and copy-ready CSS — 100% in your browser.

Backdrop blur (px) 10

Background opacity 0.50

Background color

Border (px) 1

Border color

Border radius (px) 14

Glass Card

Frosted glass UI

Adjust backdrop blur, background opacity and color, then add a border and radius. The preview card updates live over a colorful gradient. Click Copy to grab the full CSS (with -webkit-backdrop-filter prefix for Safari).