Manipulate the Colors of an Image with CSS


In CSS, there is the filter property, which is still a working draft but already entirely supported by all modern browsers.

Andreas Zettl | 13 minutes read

The Sample Images

Here you see the original versions of the images on which we apply the filters in this article.

Tree Lake Mountain


The following sample applies a grayscale of 100% to the images.

filter: grayscale(100%)

Tree with grayscale(100%) Lake with grayscale(100%) Mountain with grayscale(100%)


To blur the image, you can use the blur filter. In the below sample, we use the 2px as value.

filter: blur(2px)

Tree with blur(2px) Lake with blur(2px) Mountain with blur(2px)

You can apply all filters in this article also on any other element. One example is to blur some text; of course, you can still copy the text, or remove the filter via the developer console of the browser.

<p style="filter: blur(2px)">Some blurred text.</p>

Some blurred text.


The brightness can also be reduced or increased with a filter.

filter: brightness(80%)

Tree with brightness(80%) Lake with brightness(80%) Mountain with brightness(80%)


The following sample applies a contrast of 150% to the images. On all filters where we put percentage values, you can also put decimal values.

filter: contrast(150%)


filter: contrast(1.5)

Tree with contrast(150%) Lake with contrast(150%) Mountain with contrast(150%)

Hue Rotate

Rotate the Hue value of an image by passing a positive or negative angle.

filter: hue-rotate(180deg)

Tree with hue-rotate(180deg) Lake with hue-rotate(180deg) Mountain with hue-rotate(180deg)

filter: hue-rotate(90deg)

Tree with hue-rotate(90deg) Lake with hue-rotate(90deg) Mountain with hue-rotate(90deg)

filter: hue-rotate(-90deg)

Tree with hue-rotate(-90deg) Lake with hue-rotate(-90deg) Mountain with hue-rotate(-90deg)


Inverts the original color of the element by X percent.

filter: invert(80%)

Tree with invert(80%) Lake with invert(80%) Mountain with invert(80%)

Other Elements

Like any other filter, you can apply invert to any other element. If you pass no value, then the default of 100% is used.

<div style="color:black;background-color:yellow;filter:invert();">A Black Text on Yellow Background inverted by 100%</div>
A Black Text on Yellow Background inverted by 100%


Adds transparency to the image.

filter: opacity(50%)

Tree with opacity(50%) Lake with opacity(50%) Mountain with opacity(50%)


The below sample saturates the image by X percent.

filter: saturate(150%)

Tree with saturate(150%) Lake with saturate(150%) Mountain with saturate(150%)


This filter converts the original image to sepia.

filter: sepia(100%)

Tree with sepia(100%) Lake with sepia(100%) Mountain with sepia(100%)

Combine the Filters

You can combine any number of these filters, but you need to be aware of the order. Adding a grayscale(100%) filter at the end will always return you a gray image.

filter: saturate(150%) hue-rotate(270deg)

Tree with saturate(150%) hue-rotate(270deg) Lake with saturate(150%) hue-rotate(270deg) Mountain with saturate(150%) hue-rotate(270deg)

Wrong Order of Filters

Here you see a sample with the wrong order, which gives you the same result as only calling grayscale(100%).

filter: hue-rotate(270deg) grayscale(100%)

Tree with hue-rotate(270deg) grayscale(100%) Lake with hue-rotate(270deg) grayscale(100%) Mountain with hue-rotate(270deg) grayscale(100%)

🔙 Back to the article overview | Share on Twitter