CSS filters for images

How filter works

The filter property applies graphic effects to an element when the browser paints it: the image file itself doesn’t change. Several functions can be chained, separated by spaces, and order matters: each one is applied to the result of the previous one. This tool always writes them in the same order.

• grayscale(), sepia() and invert() go from 0% (no effect) to 100%.
• brightness(), contrast() and saturate() start at 100%: below reduces, above increases.
• hue-rotate() spins every colour around the colour wheel, in degrees.
• blur() blurs, in pixels. drop-shadow() draws a shadow that follows the outline, including that of a transparent PNG.

Common uses

• Grey client logos that get their colour back on hover: tick the hover option.
• Text over a photo: lowering the brightness (brightness(60%)) makes white text readable without editing the image.
• Blurred backgrounds behind a modal or a card. To blur what’s behind an element, the property is backdrop-filter.
• Disabled states: grayscale(100%) opacity(50%) on a sold-out product.

Server-side filters with /random

ximg.es random photos accept two filters in the URL itself, applied when the image is generated: ?grayscale for black and white and ?blur=1…10 to blur. The difference from CSS is that the image arrives already filtered, so there’s no painting cost and it works where you don’t control the CSS, such as an email:

<img src="https://ximg.es/random/800x600?seed=cover&grayscale&blur=3" alt="">

More image options in the generator.

Performance

Colour filters are cheap. blur() and drop-shadow() with large radii cost more, especially when animated or on many elements at once. If a filter never changes and the image is yours, it can pay to apply it on export.