UTILS.
100% in-browser

CSS Filter Generator

Compose CSS filters with sliders and a live preview, then copy.

About this tool

Stack blur, brightness, contrast, grayscale, sepia, saturate and hue-rotate filters on a live preview, then copy the combined filter rule. Everything runs in your browser.

Frequently asked questions

Can I apply this filter to an image?
Yes — copy the rule onto any element such as an img, and the listed filter functions apply in the order shown.
Why is the order of filter functions important?
Filters are applied left to right, so blurring before adjusting brightness gives a different result than the reverse; keep the order that looks best.

More tools