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

Grayscale

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%)

Blur

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.

Brightness

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%)

Contrast

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%)

or 

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)

Invert

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%

Opacity

Adds transparency to the image.

filter: opacity(50%)

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

Saturate

The below sample saturates the image by X percent.

filter: saturate(150%)

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

Sepia

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

125x125 Fiverr Pro    Grammarly Logo       10% discount- Jump- start your career

Advertisment: These links are affiliate (commission) links. If you click on such a link and buy something on that website, I get a commission. For you, the price does not change.