CSS backdrop-filter generator — blur, dim or recolour what sits behind an overlay

How to use the CSS backdrop filter generator

1. Drag the filter sliders: blur, brightness, contrast, saturate, grayscale, hue-rotate, invert and sepia.
2. Set Tint opacity and Tint colour to wash the overlay with a colour. Set the opacity to 0 for no tint.
3. Watch the large “BACKDROP” word and the coloured scene change inside the overlay box.
4. Copy the .overlay rule and put it on your modal backdrop, sticky header or panel.

What it does and when to use it

backdrop-filter changes what you see through an element, not the element itself. That makes it the right tool for a blurred and dimmed layer behind a dialog, a sticky header that stays readable while the page scrolls under it, or a greyed-out overlay that shows part of a page is unavailable.

If you want to change an image or element directly, use the CSS filter generator instead. For a ready-made frosted card with border and shadow, the glassmorphism generator is quicker, and to tint with a blending effect rather than a filter, see the blend mode generator.

How it works

Each slider has a neutral value (0 for blur, grayscale, hue-rotate, invert and sepia; 100% for brightness, contrast and saturate). Neutral sliders are skipped, and the rest are joined in this order: blur, brightness, contrast, saturate, grayscale, hue-rotate, invert, sepia. If none are active, the value is none. The tint becomes an rgba() background, or transparent at 0%.

MDN lists backdrop-filter as Baseline newly available since September 2024 and warns that it might not work in older devices or browsers. Test the fallback: without support, people see only the tint, so give it enough opacity to keep text on top readable.

Worked examples

The default overlay, a light frost:

.overlay {
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}

A dimmed modal backdrop. blur 6 px, brightness 60%, saturate back to 100%, tint 0: backdrop-filter: blur(6px) brightness(60%); with background: transparent;. The page behind goes soft and darker, which pushes attention to the dialog.

An “unavailable” layer. Only grayscale at 100%, blur 0, tint 0: backdrop-filter: grayscale(100%); and background: transparent;. Content behind turns grey but stays sharp. Pair it with a visible message; colour alone does not tell everyone the section is disabled.

Limits and tips

• Some combinations cancel out. Because grayscale comes before hue-rotate, a full grayscale leaves hue-rotate nothing to turn; grey stays grey.
• Check text contrast over the busiest part of the backdrop with the contrast checker.