CSS filter generator
Apply CSS filters to an image live: blur, brightness, contrast, saturation, grayscale, sepia, hue, invert. Get the CSS code and the filtered image.
- Free
- No sign-up
- No file uploaded
- Windows, Mac, Android, iPhone
Loading the tool…
About this tool
Tune CSS filters on a sample image or your own photo: blur, brightness, contrast, saturation, grayscale, sepia, hue rotation, invert and opacity, with 10 ready-made filters (vintage, black and white, dramatic…). Compare with the original, copy the code or save the filtered photo.
When to use it
Hover effects
A black-and-white image that regains its colors on hover (grayscale(100%) then none) is an elegant effect for a gallery or partner logos.
Harmonize images
One light filter applied to every photo on a page gives them a shared mood without editing the files.
Quick photo edits
Brighten, saturate or turn a photo sepia, then save it, without installing software.
How to use
- Pick a ready-made filter or tune each slider.
- Try the result on your own photo.
- Copy the CSS code or save the filtered photo.
How it works
The filter code only includes functions that change something, in a fixed order. The preview is the image itself with that code applied by the browser.
To save the photo, the image is drawn in a canvas with the same filter chain (the canvas filter property), at full size up to 16 million pixels, then saved as PNG. Nothing is uploaded.
Tips for best results
- Few filters, lightly applied: 110% contrast and 120% saturation are often enough.
- Blur is costly to animate on large images: prefer it for static backgrounds.
- For black-and-white logos that turn colorful on hover, add a transition on filter.
- hue-rotate shifts every color: handy to create several color variants of an illustration.
Common problems and fixes
The saved photo has no filter
Your browser doesn't apply canvas filters (Safari before version 18). Use Chrome, Edge or Firefox, or update Safari.
The blur bleeds outside the image
Blur spreads past the edges. Put the image in a container with overflow: hidden.
Colors look wrong after invert
invert also inverts skin tones and sky: combine it with hue-rotate(180deg) to get closer hues.
Frequently asked questions
Which filters does CSS offer?
blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert and opacity. They can be chained in a single filter property.
Does the filter order matter?
Yes, they apply in the written order. The tool always uses the same order, which guarantees the preview matches the code.
How is it different from backdrop-filter?
filter changes the element itself; backdrop-filter changes what is behind it (frosted glass effect). Code for both is provided.
Can I keep the filtered image?
Yes: with your photo, “Save the filtered photo” produces a PNG with the filters applied, on your device.
Related searches
Still stuck?
Ask on the forum: the category, the tool, your device sheet and the test result will be filled in for you.