How to Convert any Image into a Grayscale Image With CSS

This code snippet guide will show you how to change the color of an image on a web page into a grayscale image with CSS.

If you have an image you want to display on your website, web application or any other application that supports CSS styling then you can do it without editing the image in a graphics editing suite.

CSS provides a filter that will allow you to do it.

Filter to Grayscale Image With CSS

The following is the syntax to use:

filter: grayscale(%)

Where 0% (0) is the default and represents the original image while 100% (1) will make the image completely gray fully black and white images. Negative values are not allowed with grayscale.

Here is an example:

img {
  filter: grayscale(100%);
}

Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.