Convert an image to grayscale in HTML/CSS

Question

Is there a simple way to display a color bitmap in grayscale with just HTML/CSS?

It doesn\'t need to be IE-compatible (and I imagine it won\'t be) -- if

Answer 1

Update: I made this into a full GitHub repo, including JavaScript polyfill for IE10 and IE11: https://github.com/karlhorky/gray

I originally used SalmanPK's answer, but then created the variation below to eliminate the extra HTTP request required for the SVG file. The inline SVG works in Firefox versions 10 and above, and versions lower than 10 no longer account for even 1% of the global browser market.

I have since been keeping the solution updated on this blog post, adding support for fading back to color, IE 10/11 support with SVG, and partial grayscale in the demo.

img.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,#grayscale");

  /* IE 6-9 */
  filter: gray;

  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
}

img.grayscale.disabled {
  filter: none;
  -webkit-filter: grayscale(0%);
}