23

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?

Golo Roden
  • 140,679
  • 96
  • 298
  • 425

2 Answers2

31

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

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • I think this is a better solution: doesn't break scrolling and DOM element positioning as accepted solution does and may be more efficient. – ignacy130 Mar 14 '18 at 18:27
  • Why ‘html‘ and not just the ’body’? – Robo Robok Jan 17 '19 at 03:39
  • @RoboRobok as said in the answer, one or the other, If set body, then a colored background can be set on html in the case you still want to use a bit of colors (such as a red stripe or whatever else ... ) – G-Cyrillus Jan 17 '19 at 14:02
28

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

Luís P. A.
  • 9,524
  • 2
  • 23
  • 36