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.

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%)
📋 Copy Code

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)
📋 Copy Code

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.

Some blurred text.
📋 Copy Code

Some blurred text.


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

filter: brightness(80%)
📋 Copy Code

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)
📋 Copy Code

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)
📋 Copy Code

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

filter: hue-rotate(90deg)
📋 Copy Code

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

filter: hue-rotate(-90deg)
📋 Copy Code

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%)
📋 Copy Code

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.

A Black Text on Yellow Background inverted by 100%
📋 Copy Code
A Black Text on Yellow Background inverted by 100%


Adds transparency to the image.

filter: opacity(50%)
📋 Copy Code

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


The below sample saturates the image by X percent.

filter: saturate(150%)
📋 Copy Code

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


This filter converts the original image to sepia.

filter: sepia(100%)
📋 Copy Code

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)
📋 Copy Code

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%)
📋 Copy Code

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