<img src=http://upload.wikimedia.org/wikipedia/zh/3/34/Lenna.jpg alt="Lena Söderberg full color" title="Lena Söderberg full color" style="float:left"><img src=http://upload.wikimedia.org/wikipedia/zh/3/34/Lenna.jpg alt="Lena Söderberg desaturated with CSS" title="Lena Söderberg desaturated with CSS" id="lena-desaturate">


<svg version="1.1" xmlns="http://www.w3.org/2000/svg">    
    <filter id="greyscale">
     <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>
img { 
  width: 300px;
  height:300px;
}
img#lena-desaturate{
  -webkit-filter: grayscale(1);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(#greyscale);
  filter: gray;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.