CSS filter generator
Tune image-style filters with a live before-and-after illustration and CSS output.
How it works & useful details
How to use this tool
Adjust brightness, contrast, saturation and optional effects. Compare the same built-in illustration before and after.
Supported values and limitations
Exports CSS filter declarations, not image files. Functions are applied left to right in the shown order. The local built-in illustration contains neutral, bright and dark areas to make changes visible without uploading a file.
About this tool
CSS filter generator blends visual adjustments such as blur, brightness, contrast, saturation, and hue rotation, with a before-and-after illustration so you can judge the effect. It produces a filter declaration you can apply to images or UI elements.
The preview illustration is built into the tool, so no image needs to be uploaded. Filters update live as you drag the controls, and the CSS output is ready to copy.
How to use it
- Adjust each filter value and watch the after preview.
- Compare against the untouched before illustration.
- Combine filters until the effect looks right.
- Copy the generated filter declaration into your stylesheet.
What each filter does
- brightness(120%): lightens. 0% is black.
- contrast(150%): stretches the difference between light and dark.
- saturate(0%): removes colour. Values above 100% intensify it.
- grayscale(100%) and sepia(100%): full black-and-white or warm vintage toning.
- hue-rotate(90deg): shifts every hue around the colour wheel.
- blur(4px): Gaussian blur, useful for backgrounds behind overlays.
Filters apply left to right, so their order matters. grayscale followed by sepia gives an evenly toned image, while sepia followed by grayscale removes the toning again.
Practical uses
Common patterns include a greyscale logo wall that turns colourful on hover (filter: grayscale(100%) with a transition), dimming a background image under text with brightness(60%) for readable contrast, and blurring content behind a modal. For frosted glass effects, backdrop-filter uses the same functions but applies them to what is behind the element.
Filters change how an image is displayed, not the file itself. To permanently edit an image, use an image editor, or the image tools here for resizing and conversion.
Frequently asked questions
In which order are the filters applied?
Left to right, as written in the declaration. The generated order matches the order shown in the tool.
Can I apply the filter to text or backgrounds?
Yes. Although the preview uses an image-style illustration, a CSS filter applies to any element it is set on.
Does the filter change the original image file?
No. It is a visual CSS effect; the source file is neither uploaded nor modified.
Do CSS filters affect performance?
Most filters are GPU-accelerated and cheap. Large blur radii on big elements, especially while animating, are the expensive case.