CSS backdrop-filter Generator

Build live backdrop-filter CSS by dragging sliders for nine filter functions: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia. The output emits both backdrop-filter and -webkit-backdrop-filter so the effect works across modern browsers, and a glass card is rendered over a customizable background so you can see the result as you tune it.

1. Optionally click a preset (Frosted Glass, Dark Glass, Vintage, Inverted) to start from a curated look. 2. Drag the sliders in the Controls panel; each filter only appears in the generated CSS when it differs from its default (e.g. brightness/contrast/saturate/opacity default to 100, blur defaults to 0). 3. Edit the Background field with any valid CSS background value (gradient, image url, color) to test the filter over different art. 4. Click Copy to copy both backdrop-filter and -webkit-backdrop-filter declarations.

blur 0–50px; brightness 0–200% (default 100); contrast 0–200% (default 100); grayscale 0–100%; hue-rotate 0–360deg; invert 0–100%; opacity 0–100% (default 100); saturate 0–200% (default 100); sepia 0–100%. Reset restores every slider to its default. Filters at their neutral value are omitted from the output; if all are neutral the output is backdrop-filter: none.