CSS Glassmorphism Generator

Design frosted glass effects with live preview. Copy production-ready CSS.

Your files never leave your device — processed 100% in your browser memory

Live Preview

Glass Card

Adjust the sliders

Controls

Blur12px

Opacity0.15

Saturation180%

Border Opacity0.20

Border Radius16px

Tint Color#ffffff

CSS Code

/* Glassmorphism */
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);