Back to Design Tools

Image Filters

Apply CSS filters to your images and preview in real-time

Click to upload an image

JPG, PNG, WebP supported

Filters

About the CSS Image Filters

This tool previews CSS image filters — grayscale, sepia, blur, brightness, contrast, saturate, hue-rotate and invert — on your own image, chains several together, and gives you the filter declaration to copy straight into a stylesheet. No image editor required.

CSS image filters apply effects at render time rather than baking them into a file, which means one image can be reused in several treatments and the effect can be changed or removed with a stylesheet edit.

That makes them ideal for hover states and theming. A thumbnail grid can render grayscale and come to full colour on hover; a dark theme can dim images with brightness; a hero photo can be blurred behind text for legibility without producing a second asset.

Filters compose, so several can be chained in one declaration and applied in order. The main cost is performance: blur in particular is expensive to composite, so it is worth checking on a mid-range phone before using it across a long list.

How to use the CSS Image Filters

  1. Load an image. Use the sample or drop in your own to preview against real content.
  2. Pick a filter. Try grayscale, sepia, blur, brightness, contrast, saturate, hue-rotate or invert.
  3. Combine and tune. Chain several filters and adjust their values.
  4. Copy the CSS. Take the filter declaration into your stylesheet.

CSS Image Filters features

  • Grayscale, sepia and invert effects
  • Blur, brightness, contrast and saturate controls
  • Hue rotation across the colour wheel
  • Chain several filters in one declaration
  • Preview on your own image
  • Copyable CSS filter property

Frequently asked questions

What can CSS filters do?

Grayscale, sepia, invert, blur, brightness, contrast, saturate and hue-rotate, applied at render time rather than baked into the file.

Can I combine several filters?

Yes. Filters chain in one declaration and are applied in the order listed.

Do filters change the original image?

No. They are applied when the page renders, so the file is untouched and the effect can be changed in CSS.

Are CSS filters slow?

Most are cheap, but blur is expensive to composite. Test it on a mid-range phone before using it across a long list.

Are they widely supported?

Yes. The filter property works in all current browsers without vendor prefixes.