Does filter affect child elements?

Yes. A filter applies to the element and everything inside it, and it also creates a new stacking context and containing block, which can change how a `position: fixed` descendant is positioned. To treat only what is behind an element, use backdrop-filter instead.

Does filter order matter?

It does. Filters apply in sequence, so grayscale followed by contrast is not the same as contrast followed by grayscale. This tool always emits a consistent order, which is why the preview and the copied CSS always agree.

CSS / FRONTEND · RUNS IN YOUR BROWSER

CSS Filter Generator

Dial in blur, brightness, contrast, saturation, and more with a live comparison.

Only functions that differ from their neutral value are emitted, so the copied CSS carries nothing redundant.

Preview

Preview backdrop

LightDarkTransparent

Tooloo

Original

Tooloo

Filtered

Generated CSS

filter: none;

Presets

Adjustments

Blur

Brightness

Contrast

Grayscale

Hue rotate

Invert

Opacity

Saturate

Sepia

About this tool

Blur, brightness, contrast, grayscale, hue rotation, invert, opacity, saturation, and sepia all sit on one set of sliders, and the preview applies them in the order CSS specifies. Because the tool emits only the functions you actually moved, the filter declaration you copy is always the shortest one that produces the effect, rather than a wall of no-op 100% values.

How it works

Apply a preset look, or move individual sliders directly.
Compare the treated and untreated versions in the preview.
Copy the filter declaration, or reset to neutral.

Privacy

Every calculation and preview runs inside this browser. Your input is never uploaded, stored, or written to the URL or any log.

Frequently asked questions

Does filter affect child elements?: Yes. A filter applies to the element and everything inside it, and it also creates a new stacking context and containing block, which can change how a `position: fixed` descendant is positioned. To treat only what is behind an element, use backdrop-filter instead.
Does filter order matter?: It does. Filters apply in sequence, so grayscale followed by contrast is not the same as contrast followed by grayscale. This tool always emits a consistent order, which is why the preview and the copied CSS always agree.

← All CSS / Frontend tools