Glassmorphism Generator

Create beautiful frosted glass CSS effects with a visual editor.

Glass Card

This is a live preview of the glassmorphism effect. Adjust the controls below to customize the frosted glass appearance.

DesignCSSGlass

Glass Properties

Background Opacity: 0.25

Blur: 16px

Border Opacity: 0.18

Border Radius: 16px

Saturation: 180%

Glass Color

Presets

Generated CSS

/* Glassmorphism */
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

How to use

Adjust transparency, blur, and colors to create glass effects.