🎚️ CSS Filter Generator
Combine CSS filter functions with sliders and copy the code. Blur, brightness, contrast, grayscale, sepia, hue and more preview live on an image.
filter: none;How the css filter generator works
The CSS filter property applies graphical effects to an element: blur(), brightness(), contrast(), grayscale(), sepia(), hue-rotate(), saturate(), invert() and opacity(). This generator gives each a slider, previews them on a sample image, and chains the functions in the order you set them (order matters, since each filter operates on the result of the previous). The output is a ready-to-paste filter declaration, generated entirely in your browser.
Filters are applied in sequence, so grayscale() then sepia() looks different from sepia() then grayscale(). Blur can be expensive to animate; prefer transform and opacity for smooth animation. The same functions also work in the backdrop-filter property to blur whatever sits behind a translucent element.
Frequently asked questions
What filter functions can I combine?
blur, brightness, contrast, grayscale, sepia, hue-rotate, saturate, invert and opacity. You can chain as many as you like in one filter declaration; they apply left to right.
How do I make an image black and white?
Use grayscale(100%). For a vintage look, combine sepia() with a slight contrast() and brightness() adjustment. The tool previews each on a sample image so you can dial it in.
What is the difference between filter and backdrop-filter?
filter affects the element itself; backdrop-filter affects whatever is visible behind the element (used for frosted-glass effects on translucent panels). The same functions work in both.
Does filter order matter?
Yes. Each function operates on the output of the previous one, so rearranging them changes the result. The generator applies them in the order shown.
Is my image uploaded?
No. The preview uses a built-in sample and the CSS is generated locally; nothing you do is sent to a server.