How to Turn an Entire Webpage to Grayscale Using CSS

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

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

Is it possible to turn an entire webpage to grayscale using javascript

To select all elements, use * as well...

Array.from(document.getElementsByTagName("*"))
    .forEach(el => el.style.filter = 'grayscale(100%)');

However, if you just want to set grayscale on your page, use

document.body.style.filter = 'grayscale(100%)';

Is it possible to convert the whole page in grayscale except img?

As mentioned in the other answer, apply greyscale to all element except images.

body *:not(img) {  -webkit-filter: grayscale(100%);  filter: grayscale(100%);}h1 {  color: red;}img {  float: left;}p {  color: green;}

<h1>Phil is Awesome</h1><img src="http://www.fillmurray.com/200/300" alt="Sample Image"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, corrupti culpa suscipit, saepe voluptas eius.</p>

Firefox: How to Grayscale an Entire Page without breaking fixed-positioned elements?

What if you apply the filter to body > *? Less performant, but may solve this issue. I admit to not fully considering new issues it may raise, but I can't think of a scenario in which it would alter the containing block of second depth elements.

How to Set A Webpage in gray scale color Mode while clicking a Button

You can try using canvas :

http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html

or use a separate css
something like this :
body class="color"
body class="bw"

and define "bw" in your css

for all the images you change the source with javascript :
src=foo.jpg
src=foo_bw.jpg

How to make A particular Web Page Grey on certain events like when the page is offline?

As others mentioned, you could use an overlay placed using position: fixed above the entire HTML. However this would not allow the user to click any elements beneath the overlay, so it depends on what you are after.

In the case of Flipkart, they apply the following CSS to the <html> tag:

filter: grayscale(1);

They also apply inline style to the individual elements, such as buttons to modify their colours. This approach will still allow you to navigate the site, which will come in handy if you allow for offline functionality.

Finally you will then need to add event listeners in JavaScript to handle when the user goes online or offline, such as below.

window.addEventListener('online', function(e) {
    // add your logic to update the UI when online
    console.log("You are online");
    document.body.style.filter = 'grayscale(0)';
}, false);

window.addEventListener('offline', function(e) {
    // add your logic to update the UI when offline
    console.log("You are offline");
    document.body.style.filter = 'grayscale(1)';
}, false);