Glassmorphism Generator

Create modern glassmorphism effects with backdrop blur

Background

Background Color

Background Opacity0.2

Backdrop Blur10px

Border

Border Color

Border Width1px

Border Opacity0.3

Border Radius

Radius16px

Live Preview

Glassmorphism

Modern glass effect

Generated CSS

.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
}