Glassmorphism Generator

Generate frosted-glass CSS with live preview — backdrop-filter blur, opacity, and rounded borders. Free, private, runs in your browser.

Background color

Background opacity0.20

Blur (px)12

Border radius (px)16

Border color

Border opacity0.30

Glass card

CSS

background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.30);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);