How to Apply CSS Filters to an Image: Step-by-Step Guide

Step-by-Step

1. Upload a preview image so you can see the effect applied in real time.
2. Adjust individual filter sliders — blur, brightness, contrast, and so on — until it looks right.
3. Combine multiple filters if needed for a layered effect.
4. Copy the generated CSS into your stylesheet.

Applying the Result

.filtered-image {
  filter: grayscale(60%) contrast(120%) brightness(105%);
}

Apply the filter property directly to an <img> tag, or to any element — it works on divs, videos, and canvas elements too, not just images specifically.

Order Matters

When combining multiple filter functions, each one applies to the result of the previous one, in the order they're written, left to right. grayscale(60%) contrast(120%) and contrast(120%) grayscale(60%) can produce subtly different results, since the second filter is working on an already-modified image in each case.

A Non-Destructive Effect

CSS filters change how an image displays, without touching the actual image file at all — the original file stays completely unchanged. This makes filters easy to adjust, remove, or apply conditionally (like only on hover), since nothing about the source image itself was ever modified.