CSS filter generator
Visually adjust a CSS filter (blur, brightness, contrast, saturation, grayscale, sepia, invert, hue rotation) on a preview image, then copy the resulting filter code. Nothing is sent to a server: everything is calculated directly in your browser.
How it works
The CSS filter property applies graphic effects (blur, brightness, contrast...) directly in the browser, without altering the source image. This tool lets you combine several effects at once on a live preview, then grab the exact value to paste into your stylesheet, on an image, a gallery thumbnail, or a hover effect.
Does the CSS filter modify the original image file?
No. filter is a purely visual effect applied by the browser to the element's rendering: the image file remains intact on disk. To get a permanently modified image, you would need to redraw it on a canvas and then export it.
Can a CSS filter be animated on hover?
Yes, by combining the property with a :hover rule and a transition on filter, the effect gradually transitions from one state to another, a common technique for portfolio thumbnails or product cards.
No image or data is sent to a server: the filter calculation runs entirely in your browser.