CSS Filter Generator

Tune blur, brightness, contrast, and more with a live filter preview.

Presets:

Blur0px

Brightness100%

Contrast100%

Grayscale0%

Saturate100%

Sepia0%

Invert0%

Hue Rotate0deg

Live preview

Active Filters: 0Filter Output: noneCSS Size: 13 B

CSS Code

filter: none;

Working with the CSS filter property

The filter property applies graphical effects like blur, color shifts, and brightness to any element — images, backgrounds, even text. Functions stack left to right and are applied in order, so grayscale(100%) contrast(150%) desaturates first, then boosts contrast. Values at their neutral default (e.g. brightness(100%)) are omitted to keep the output clean. Drag the sliders and copy the result — everything renders locally in your browser.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Tuning blur, brightness and contrast against a live preview.
Producing a duotone or a greyscale effect without editing the image.
Building a hover filter for an image thumbnail.
Comparing filter combinations before choosing one.
Adjusting an image's appearance without a second asset.

Frequently Asked Questions

Does the order of filter functions matter?: Yes — they form a pipeline, each operating on the previous one's output. `grayscale(100%) contrast(150%)` removes colour and then boosts the remaining tonal range; reversing it boosts colour contrast first and then discards it, which gives a different set of greys entirely.
What are the neutral values?: 100% for brightness, contrast and saturate; 0 for blur, grayscale, sepia, invert and hue-rotate. Getting these backwards is the usual reason a filter appears to do nothing or wipes the element out — `brightness(0)` is black, not unchanged.
How does hue-rotate actually work?: Not by converting to HSL and adding degrees. It applies a fixed 3×3 colour matrix that approximates a rotation in a luminance-preserving space, which is why `hue-rotate(180deg)` is not the same as taking each pixel's complement — the approximation is specified in the Filter Effects spec.
Why did my fixed-position child stop being fixed?: Because any filter other than `none` makes the element a containing block for descendants with `position: fixed` or `absolute`. This catches people constantly: adding a subtle blur to a wrapper silently re-anchors a modal or a dropdown inside it. `transform` and `will-change` do the same thing.
Is a CSS filter cheaper than editing the image?: Cheaper to author and to change, more expensive to render — the filter runs on every paint, on every device. For a static treatment applied to one image, bake it in and ship the processed file. For hover states, theming, and anything that has to change at runtime, the filter is the only option.

Common errors and gotchas

Getting the order wrong, since filters apply in sequence and the result differs.
Filtering a large element, which is expensive to composite and can drop frames.
Applying a filter to a container and unintentionally filtering its text as well.
Creating a containing block for fixed positioning, which changes descendant layout.
Using a filter to fix an image that should have been corrected at source.