Invert an Image With One CSS Filter

To invert an image in CSS, one declaration is enough:

.image-inverted {
  filter: invert(100%);
}

Black becomes white, white becomes black, and every other channel is inverted between those ends. invert(0%) leaves the image unchanged, so intermediate values produce a partial effect.

Combine filters in the order you mean

CSS filters can also change saturation, contrast, brightness, blur, grayscale, and sepia. Multiple functions run from left to right:

.image-container {
  filter: invert(100%) grayscale(50%) sepia(25%);
}

Changing that order can change the result because each function receives the output of the previous one. A more obvious combination is:

.muted-image {
  filter: grayscale(30%) blur(3px) contrast(150%);
}

Filters are useful for decorative media and small state changes. I would be cautious about applying them to a whole page or interactive controls: they can make focus states, brand colours, and contrast harder to predict. Large filtered areas may also cost more to render. This filter overview covers the other functions.

SVG filters handle custom colour transforms

When CSS functions are not precise enough, an SVG filter can combine primitives such as <feColorMatrix>, <feGaussianBlur>, and <feBlend>.

Define the filter in SVG, give it an ID, then reference that ID from CSS:

.illustration {
  filter: url(#yourFilterId);
}

An feColorMatrix transforms the red, green, blue, and alpha channels with a matrix. It gives much more control than invert(), but the matrix is also much harder to understand six months later. Use it when the visual result genuinely needs custom channel maths.

SVG rendering has had browser-specific edge cases. This Safari discussion and a longer colour-inversion experiment show why testing the actual asset matters.

For ordinary icons or images, start with filter: invert(1). Move to an SVG filter only after the simple version fails in a way you can describe.

← Back to all articles