Convert an image to grayscale in CSS

Want to display a color bitmap in grayscale with just HTML/CSS? A quite little effort is sufficient for a lazy person to do this.

We all know that CSS filters aren’t yet widely supported for all cases but, they are actually impressive and a basic need for web environment imagery. This allow you to modify the display of images in a variety of ways and like one of those ways is being displaying the images as a grayscale.

And doing so requires a most minimal of CSS change. Also you can even animate the image to or from grayscale. Amazing right?

It is possible to do this with the help of SVG and Canvas but, seems like with CSS it doesn’t put extra effort on this to work right now.

We now have a cross-browser solution as CSS filters has landed in the Webkit.

Read Also: Apply CSS to half of a character

Suppose, we have a following image HTML:

<div id="imgGrey"><img src="image.jpg"></div>

So, by default this will display the original image with actual color.
But, if we want to display the image as a greyscale and hovering mouse, we want to display the actual color the the following code can help.

#imgGrey img {
filter: gray; /* For IE6-9 */filter: grayscale(1); /* For Microsoft Edge and Firefox 35+ */-webkit-filter: grayscale(1); /* For Google Chrome, Safari 6+ & Opera 15+ */}

/* Now disable grayscale on hover */#imgGrey img:hover {
filter: none;
-webkit-filter: grayscale(0);
}

CSS filters also allow much more than just adjusting the grayscale and remember that if the user chooses to download the image, then this will be downloaded in its original colored displays. So, for online display purposes, CSS filters can do the little trick!

See the DEMO here.