Glassmorphism Generator

# Glass Card

PREVIEW

.glass-card {
  background: rgba(255, 255, 255, 0.20);
  border-radius: 16px;
  box-shadow: 0px 8px 30px 0px rgba(31, 38, 135, 0.30);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.30);
}

CSSSASSSCSS

Edit

Presets

Background

Background Color:

Background Opacity:

Blur:

Saturation:

Border Radius:

Border

Enable Border

Border Width:

Border Color:

Border Opacity:

Shadow

Shadow Color:

Shadow Blur:

Shadow Spread:

Shadow Opacity:

Grain

Enable Noise Overlay

Preview Background Image

Drop image here to replace the preview background

What is a Glassmorphism Generator?

Glassmorphism is a UI style built from translucent, frosted-glass panels layered over a colorful background. Adjust background opacity, blur, saturation, border, shadow, and an optional grain texture to craft the effect, preview it live, and export clean CSS, SASS, or SCSS ready to drop into your project.