CSS Glassmorphism Generator

Create beautiful glass-effect UI components. Adjust blur, opacity, saturation, and border. Copy the CSS code.

Blur: 10px

Opacity: 25%

Saturation: 180%

Border Opacity: 20%

Border Radius: 16px

Glass Color:

Background

CSS Code

.glass {
  background: #ffffff40;
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.20);
}

Glass Card

This is a glassmorphism effect. Adjust the controls to customize the look.