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

1
2
3
4
5
6
7
8
9
10
.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

1
2
3
4
5
6
7
8
.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 is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by: