CSS Glassmorphism Generator

Create frosted glass UI effects with backdrop-filter. All processing happens in your browser.

Glass Card

This is a preview of the glassmorphism effect with your current settings.

CSS

background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);

Background

#6366f1

Text

#ffffff

Blur16px

Background Opacity15%

Saturation120%

Border Opacity30%

Presets