Is it possible to turn an entire webpage to grayscale using CSS?

Question

I would like to turn an entire website to grayscale. Of course, I can manually edit the CSS and adjust every single color, background-color & co. property, and I can adjust every single image in Photoshop.

But is there an easier way, e.g. by using pure CSS?

E.g., something such as putting a 100% x 100% overlay div on top of your site that turns every color to grayscale?

Any hints?

Answer 1

No need to set the filter on every single element, You can apply the filter on HTML.

html {
    -moz-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    filter: grayscale(100%);
}

or body if you wish to keep a colored background on html.

http://codepen.io/anon/pen/VLawaK

Answer 2

Yes there is, just use filter grayscale

CSS

*{
    -moz-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    filter: grayscale(100%);
}

Note: You can apply this in any element (html, body, header, etc...)

DEMO HERE