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);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.30);
}

CSSSASSSCSS

Edit

Background Color:

Background Opacity:

Blur:

Border Radius:

Border

Enable Border

Border Width:

Border Color:

Border Opacity:

Shadow

Shadow Color:

Shadow Blur:

Shadow Spread:

Shadow Opacity:

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, border, and shadow to craft the effect, preview it live, and export clean CSS, SASS, or SCSS ready to drop into your project.