Geek Answers Handbook

Is it possible to turn the entire web page in shades of gray using CSS?

I would like to turn the entire website in shades of gray. Of course, I can manually edit CSS and customize each color , background-color and co. property, and I can customize every image in Photoshop.

But is there an easier way, for example. using pure CSS?

For example, is there something like placing a 100% x 100% div overlay on top of your site that turns every color into shades of gray?

Any clues?

+7
css colors grayscale
source share
2 answers

Yes there is, use a grayscale filter

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

+18
source share

No need to set a filter for each individual element,. You can apply a filter to HTML .

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

or body if you want to keep the background color in html.

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

+4
source share

More articles:


All Articles