CSS: How to Make Colored Image Grayscale (Black and White)

Converting a colored image into grayscale on-the-fly using CSS is now very easy. This feature can be used to create a fancy mouse over effect.

With advancements in the standards of Cascaded Style Sheets (CSS), doing a number of things in web design and development is becoming increasingly easier. The latest specification, CSS3, has brought a lot of new features. However, browser makers are yet to come to a consensus on implementing the same standards. One of the new features of CSS is to allow implementation of filters. This feature has made it very easy to display a colored image as grayscale or black and white (color saturation). Let’s see how this is done.

Grey Scale on Mouse-over Using Background Positioning

If you do enough web browsing, you must have seen dull images that spring to colored life when you take your mouse over them. Earlier this trick was played using two versions of the same image –one colored and the other one color saturated (i.e. grayscale). Then using background positioning on mouse over different images used to be displayed.

But now you don’t need to create two versions of the image because you can use the colored version and turn it grayscale on-the-fly.

Most of the major web browsers now support grayscaling with CSS –albeit in different ways. Internet Explorer 10 and above support this feature only with SVG images. Here is the CSS code you can use to do cross-browser grayscaling of colored images.

As you can WebKit browsers (like Chrome, and Safari) make it the easiest to take the colors away from a colored picture. Firefox is such a good browser but unfortunately it binds the web developers to this ugly looking code. Anyway, we can hope for betterment and in the meanwhile the above code will do the trick for you.

And yes, setting grayscale to 0% in filter properties will bring the colors back. You can use this setting on mouse roll-over to create a nice effect.

Let me know how you liked it and if you face any trouble or find a better solution -don’t forget to comment and share it with me! Cheers!

Lalit Kumar is the Principal Author and Founder of TechWelkin. He is a web explorer and he enjoys finding useful information on the Internet. He loves to put things together to create a bigger solution. Lalit is passionate about technology, languages and literature. You can contact Lalit via email (techwelkin [at] gmail [dot] com) or Facebook (facebook.com/techwelkin).