Does filter work on images?

Yes. The filter property works on images and any other element, so the same CSS applies to an img or a div.

Why combine all filters?

CSS lets you chain filter functions in one declaration, and they apply in order. This tool outputs them all together.

No. Filters are painted effects and do not change the element's box size or position.

CSS & Design

Build a CSS filter with blur, brightness, contrast and more.

Free foreverRuns in your browserNo sign-up

Preview

Blur0px

Brightness100%

Contrast100%

Saturate100%

Grayscale0%

Sepia0%

Hue rotate0deg

Invert0%

filter: blur(0px) brightness(100%) contrast(100%) saturate(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) invert(0%);

The CSS filter property applies visual effects like blur, brightness and grayscale to any element or image.

This tool gives you a slider for each filter function with a live preview, then outputs a single combined filter declaration.

It runs entirely in your browser.

Dim and blur

Output: filter: blur(2px) brightness(80%);

Chaining functions applies them together for a frosted, dimmed look.

Does filter work on images?: Yes. The filter property works on images and any other element, so the same CSS applies to an img or a div.
Why combine all filters?: CSS lets you chain filter functions in one declaration, and they apply in order. This tool outputs them all together.
Does blur affect layout?: No. Filters are painted effects and do not change the element's box size or position.