CSS Backdrop Filter Generator

Create CSS backdrop-filter effects with live preview

Controls

Blur: 10px

Brightness: 100%

Contrast: 100%

Grayscale: 0%

Hue Rotate: 0deg

Invert: 0%

Opacity: 100%

Saturate: 100%

Sepia: 0%

Preview Area

Backdrop filter applied

CSS Code

backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);