Photoshop Question posted in
The official user guide can be found here.

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

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?

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search