Cross Browser Grayscale Images with CSS Filter

  • Avinash
  • 5
  • Mar 07, 2013
  • Web Design

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

.my_image { 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 */ }
.my_image
{
background:url(images/main.jpg) no-repeat left top;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>
<filter id=\'grayscale\'><feColorMatrix type=\'matrix\'
values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/>
</filter></svg>#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

.my_image:hover { filter: url("data:image/svg+xml;utf8, #grayscale"); -webkit-filter: grayscale(0%); }
.my_image:hover
{
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>
<filter id=\'grayscale\'><feColorMatrix type=\'matrix\'
values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/>
</filter></svg>#grayscale"
);
    -webkit-filter: grayscale(0%);
}

Related Posts

Written by Avinash

Avinash Zala currently working at a leading web development company as a Sr. PHP Web Developer. He is the founder of the Xpert Developer. He has completed B.E. in Information Technology. Born and brought up in Ahmedabad. He loves to code and coding is all about passion for him. Follow him on twitter at Avinash Zala & Xpert Developer.

View all posts by:

  • MM

    Good one dude…..

  • http://bmblog.net/ Orel

    Can’t Firefox implement something like webkit’s?

  • http://webmasterswall.com Tushar Thakur

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

    • http://www.xpertdeveloper.com Avinash

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

  • amitcc

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