How To Make Images Grayscale With Only CSS

About This Script

To use this, simply copy the CSS from below to the <head> tag of your page. Then add the "grayscale" class to any image you want to make grayscale.

Demo

* Also compatible with non-pizza images.

Code

<style type="text/css">
/**
 * Greyscale image effect provided by http://www.top-site-list.com
 */
img.grayscale {
    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 */*
}
</style>

<!-- Examples. You don't need to copy this part. -->
<img class="grayscale" src="http://www.top-site-list.com/scripts/assets/grayscale-images/pizza3.jpg" />
<img src="http://www.top-site-list.com/scripts/assets/grayscale-images/pizza3.jpg" />

<img class="grayscale" src="http://www.top-site-list.com/scripts/assets/grayscale-images/pizza2.jpg" />
<img src="http://www.top-site-list.com/scripts/assets/grayscale-images/pizza2.jpg" />

More scripts