Glass Card

This is a beautiful glassmorphism effect. Customize the properties and see the magic in real time.

128

Projects

24.5K

Views

1.2K

Likes

Glass

Glass Color

Opacity

Blur

Saturation

Border

Width

Color

Opacity

Shadow

Intensity

Color

Border Radius

Radius

CSS

.glass {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(30px) saturate(100%);
  -webkit-backdrop-filter: blur(30px) saturate(100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  box-shadow: 0 13px 30px rgba(0, 0, 0, 0.12);
}

Background

Background Type

Position

Size

Overlay

Overlay Opacity

Preview Content

Presets

About CSS Glassmorphism Generator

Create beautiful glassmorphism effects visually. Create the popular frosted glass effect used in modern UI designs. Customize blur, transparency, colors, borders, and shadows, then copy the CSS instantly.