Frosted Blur Generator

Create frosted glass blur effects with backdrop filter controls

Backdrop Filter

Blur10px

Brightness1.1

Contrast1.05

Saturation1.1

Background

Background Color

Background Opacity0.3

Border

Border Color

Border Width1px

Border Opacity0.5

Border Radius16px

Presets

Live Preview

Frosted Blur Effect

This is a preview of the frosted glass effect

Generated CSS

.frosted {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px) brightness(1.1) contrast(1.05) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) brightness(1.1) contrast(1.05) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
}