CSS Filter Generator

The CSS filter property applies image-processing-style effects — blur, brightness, contrast, saturation, grayscale, sepia, hue-rotate and invert — to any element, and multiple filters can be stacked together. This generator lets you dial in each one with a live preview, then copy the combined CSS.

How to use the CSS Filter Generator

Adjust individual filters. Set blur, brightness, contrast, saturation and more with each slider.
Stack multiple filters. Combine several filters together — they apply in the order listed.
Preview live. Watch the preview image update as you adjust each filter.
Copy the CSS. Copy the generated filter CSS with all active filters combined.

Frequently asked questions

How do I blur an image with CSS?

Apply filter: blur(Npx) to the image or element — this generator's blur slider builds that value for you alongside any other filters you stack.

How do I create a grayscale image with CSS?

Apply filter: grayscale(100%) — you can also use a partial value like 50% for a desaturated (not fully grayscale) look.

Can I combine multiple CSS filters on one element?

Yes — list them space-separated in one filter property, e.g. filter: blur(2px) brightness(1.1) contrast(1.2); they apply in order.

What's the difference between filter and backdrop-filter?

filter affects the element itself and its contents; backdrop-filter (used for glassmorphism) affects whatever is visible behind the element, not the element's own content.

Can I export the filters as Tailwind classes?

Yes. Toggle Tailwind mode to get the closest matching Tailwind filter utility classes (blur-*, brightness-*, etc.) instead of raw CSS.

Is this CSS filter generator free?

Yes — completely free with no sign-up, and it runs entirely in your browser.