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