Manipulate the Colors of an Image with CSS

Andreas Zettl | 14 minutes read

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


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

Learn to Code with this Udacity Course: Introduction to ProgrammingAdvertisment🛈

🔙 Back to the article overview | Share on Twitter