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

Simplest way to achieve grayscale with CSS exclusively is via the filter property.

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

The property is still not fully supported and still requires the -webkit-filter property for support across all browsers.