Convert an image to grayscale in CSS

image to grayscale

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.

image to grayscale

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!

You may like  Online diff tool to compare text

See the DEMO here.

2 thoughts on “Convert an image to grayscale in CSS”

  1. The images shown do not actually take these properties in your post. It’s just an image that’s got a colored side and a gray side.

    That’s pretty misleading, and sad considering I spent some of my time trying to figure out why this wasn’t working in IE11 on my site, and it was working here (it isn’t really working here).

    1. This is just an image i.e. shown in the article. Actually I described the code over there. For a better view I have included the DEMO link at the bottom of the article. You can check from there.

Leave a Reply

Your email address will not be published. Required fields are marked *