Build a CSS filter visually
Adjust blur, brightness, contrast, saturation, and more on a live preview, and copy the resulting CSS filter value.
Blur, brightness, contrast, saturation, grayscale, sepia, hue rotation, and invert, each previewed live.
Every change applies instantly to the sample box so you can see the combined effect.
Only the filters you actually changed from their defaults are included, keeping the output short.
Frequently asked
Can I combine multiple filters at once?
Yes, that's exactly what this tool does. The filter property accepts a space-separated list of filter functions, all applied together in the order they're written.
Why don't unchanged sliders show up in the CSS?
A filter left at its neutral value (like brightness at 100% or blur at 0px) has no visible effect, so it's left out of the generated CSS to keep the declaration short and readable.
Does filter work on backgrounds and other elements, not just images?
Yes, filter can be applied to any element, not just <img> tags. It's commonly used on images, but works on divs, videos, and other elements too.