What does each CSS filter function do?

blur() softens the image with a Gaussian blur; brightness() and contrast() lighten/darken and increase tonal separation; grayscale() and sepia() desaturate toward gray or a warm brown tone; hue-rotate() shifts all colors around the color wheel; invert() flips colors to their negative; saturate() boosts or mutes color intensity.

Does filter affect page layout?

No — filter is purely visual, like transform, and doesn't reflow surrounding content. Multiple filter functions in one declaration are applied in the order they're written, left to right.

Can I animate filter with a CSS transition?

Yes — filter is animatable. Add `transition: filter 0.2s ease;` to the base rule and change the filter value on :hover or a toggled class for a smooth effect, like a grayscale-to-color hover on a thumbnail.

Is filter the same as backdrop-filter?

No — filter affects the element and its children's own rendering. backdrop-filter (not covered by this tool) applies the same kind of effects to whatever is visible behind a semi-transparent element, which is how frosted-glass UI panels are built.

Is my uploaded image sent anywhere?

No — it's read locally with the File API and rendered with a CSS filter directly in your browser. Nothing is uploaded to a server.

CSS FILTER GENERATOR

Dial in blur, brightness, contrast, and more on a live preview or your own image, then copy the filter CSS.

Upload your own image

Filters

Blur: 0px

Brightness: 100%

Contrast: 100%

Grayscale: 0%

Hue rotate: 0deg

Invert: 0%

Saturate: 100%

Sepia: 0%

CSS

filter: none;

How to build a CSS filter

1
Optionally upload your own image to preview filters on, or use the default preview box.
2
Drag each filter's slider — blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia — to build up the effect.
3
Combine multiple filters; they apply together in the order listed.
4
Copy the generated filter: ...; CSS and paste it into your stylesheet.

Questions

What does each CSS filter function do?: blur() softens the image with a Gaussian blur; brightness() and contrast() lighten/darken and increase tonal separation; grayscale() and sepia() desaturate toward gray or a warm brown tone; hue-rotate() shifts all colors around the color wheel; invert() flips colors to their negative; saturate() boosts or mutes color intensity.
Does filter affect page layout?: No — filter is purely visual, like transform, and doesn't reflow surrounding content. Multiple filter functions in one declaration are applied in the order they're written, left to right.
Can I animate filter with a CSS transition?: Yes — filter is animatable. Add `transition: filter 0.2s ease;` to the base rule and change the filter value on :hover or a toggled class for a smooth effect, like a grayscale-to-color hover on a thumbnail.
Is filter the same as backdrop-filter?: No — filter affects the element and its children's own rendering. backdrop-filter (not covered by this tool) applies the same kind of effects to whatever is visible behind a semi-transparent element, which is how frosted-glass UI panels are built.
Is my uploaded image sent anywhere?: No — it's read locally with the File API and rendered with a CSS filter directly in your browser. Nothing is uploaded to a server.