CSS Filter Generator

How the Image Filter Sandbox works

CSS filter generator: the filter functions

Filters are one of the few CSS features that do genuine image processing in the browser, and they apply to any element, not just images.

Order is not commutative. The functions run left to right, each taking the previous one's output. grayscale(100%) sepia(100%) gives a warm monochrome; sepia(100%) grayscale(100%) gives plain grey, because the second call strips the colour the first one added. If a combination is not doing what you expect, reversing it is the first thing to try.

What each function actually does. grayscale, sepia and saturate are colour matrix operations. brightness and contrast are linear adjustments to the channel values — note that brightness above 100% can clip highlights to pure white irreversibly, so a heavy hand loses detail. hue-rotate spins hues around the colour wheel while leaving lightness alone, which is why it is the quickest way to recolour an icon set. invert flips each channel.

Blur is the expensive one. Every other function here is a cheap per-pixel operation the GPU handles trivially. blur() is a convolution over a radius, and its cost grows with both the radius and the element's area. A large blurred hero image will show up in a performance profile; a small blurred thumbnail will not. Animating the radius is worse again — animate opacity on a pre-blurred layer instead.

filter creates a containing block. Any value other than none establishes a new stacking context, and — like transform — makes the element a containing block for position: fixed descendants. A fixed-position child inside a filtered ancestor will position itself against that ancestor rather than the viewport. This catches people out with modals and sticky headers, and the symptom looks like a positioning bug rather than a filter one.

filter versus backdrop-filter. filter processes the element and its contents. backdrop-filter processes whatever is painted behind it, which is what frosted glass panels use. They take the same function list, and you can apply both to one element.

Filters do not change the source. This is presentation only: the underlying image is untouched, the file downloaded is the original, and right-click save gives the unfiltered version. If you need the processed pixels — to upload, to export, to measure — you need a canvas, not a filter.

Contrast is a real accessibility risk. Reducing contrast or brightness on an image that sits behind text can quietly push the text below the 4.5:1 requirement. Filters also apply to foreground content when set on a container, so a filter on a card dims its label too. Check text over any filtered background rather than assuming the filter only touched the picture.

Reduced motion and reduced transparency. A filter that animates should be disabled under prefers-reduced-motion: reduce. Heavy blurs used decoratively are also worth reconsidering under prefers-reduced-transparency, which is now supported and signals exactly this preference.

Related tools