Web Design

Cross Browser Grayscale Images with CSS Filter

In this quick article we will see how we can get Cross Browser Gray scale images with just CSS Filter only.

Live example of this you can see on footer of this website in about us section. The gray scaled image in footer is converted using CSS filter only.

Let’s see how we can apply this filter to convert image to gray scale:

Gray Scale Image CSS Filter

[cc lang=”css”]
background:url(images/main.jpg) no-repeat left top;
filter: url(“data:image/svg+xml;utf8, #grayscale”); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */


Now get our image back to real color :

Normal Image CSS Filter

[cc lang=”css”]
filter: url(“data:image/svg+xml;utf8, #grayscale”);
-webkit-filter: grayscale(0%);

  • MM
    March 8, 2013 at 8:33 am

    Good one dude…..

  • Orel
    March 8, 2013 at 3:44 pm

    Can’t Firefox implement something like webkit’s?

  • Tushar Thakur
    March 31, 2013 at 6:44 pm

    Good one, Can it work with the old Internet explorer?

    • Avinash
      March 31, 2013 at 6:50 pm

      No as these features were not implemented on those old versions of IE.

  • amitcc
    April 16, 2013 at 6:52 pm

    Can you explain clearly about this tutorial?
    I don’t get it all. Looking forward for better explanation.
    However thanks for the tutorial.


Leave a Reply

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