How to Turn an Entire Website Grayscale and the CSS Code to Implement It

Preface

To express the deep mourning of the people of all ethnic groups for the martyrs who sacrificed themselves and the compatriots who died in the fight against the COVID-19 epidemic, the State Council has decided to hold a national mourning day on April 4, 2020.

In response to the General Office of the State Council's notice on holding a national mourning event for the martyrs and compatriots who died in the COVID-19 epidemic, and in accordance with requests from some of our clients, we turned some client websites black and white from 0:00 to 24:00 on April 4. At the same time, the official website of Weijie is also being turned grey in sync, to mourn the martyrs and compatriots who died in the fight against the COVID-19 epidemic. Below is a brief description of how to turn a website grey.

Main Text

CSS Method

Add a line of style in the head section of the page that needs to be turned grey.

<style type="text/css">html {-webkit-filter: grayscale(100%);}</style>

The above code works with mainstream browsers, such as the latest versions of Chrome and Edge.

<style>
    html {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
        _filter:none;
    }
</style>

The above code is compatible with the vast majority of browsers, including QQ Browser, 360 Speed Browser, Internet Explorer, and others.