Glassmorphism Generator

Generate frosted glass CSS with backdrop-filter blur, opacity and border controls.

Controls

Background color

Background opacity — 0.18

Blur — 16px

Border color

Border opacity — 0.35

Border radius — 20px

Live preview

Frosted glass card

Adjust the controls to tune the effect.

Generated CSS

.glass {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  padding: 24px;
}