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

css colors grayscale
Golo Roden picture Golo Roden · May 12, 2015 · Viewed 13.2k times · Source

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

Luís P. A. picture Luís P. A. · May 12, 2015

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

Related questions

Change color of PNG image via CSS?

Given a transparent PNG displaying a simple shape in white, is it possible to somehow change the color of this through CSS? Some kind of overlay or what not?

Read More
How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

Imagine a simple unsorted list with some <li> items. Now, I have defined the bullets to be square shaped via list-style:square; However, if I set the color of the <li> items with color: #F00; then …

Read More
div background color, to change onhover

I'm trying to make a div's background color change on mouse over. the div {background:white;} the div a:hover{background:grey; width:100%; display:block; text-decoration:none;} only the link inside the div gets the background color. what could I …

Read More