Turn Any Website Gray with a Simple CSS Filter

Background

On April 4, 2020, many Chinese websites such as Baidu, Bilibili, iQiyi, and CSDN displayed their entire pages in gray to commemorate the victims of the COVID‑19 pandemic. The effect was achieved globally without manually restyling each element.

How It Works

Inspecting the page source reveals a CSS class named gray added to the html element. The class applies a filter that desaturates the page:

html.gray {
    -webkit-filter: grayscale(.95);
}

Removing this rule restores the original colors, confirming that the filter is responsible for the gray appearance and that it affects the whole document because it targets the html node.

Implementation Details

To make any site gray, add the following CSS (including vendor prefixes for broader compatibility):

.gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

Then add the gray class to the html element (or any container) to apply the effect site‑wide.

Understanding the filter Property

filter CSS property applies graphical effects such as blur or color shifting to an element. It is commonly used for images, backgrounds, and borders.

The property supports many functions, for example: filter: blur(5px); – applies a Gaussian blur. filter: brightness(0.4); – reduces brightness. filter: contrast(200%); – increases contrast. filter: grayscale(100%); – converts the element to grayscale. filter: hue-rotate(90deg); – rotates hue. filter: invert(75%); – inverts colors. filter: opacity(25%); – changes opacity. filter: saturate(30%); – reduces saturation. filter: sepia(60%); – applies a sepia tone.

Multiple filters can be chained, e.g., filter: contrast(175%) brightness(3%);. Global values such as inherit, initial, and unset are also supported.

Browser Compatibility

All modern desktop and mobile browsers support the filter property except Internet Explorer. Firefox adds extra support for SVG filters on both PC and Android.

Conclusion

The gray‑out effect observed on many Chinese sites is achieved with a single global CSS rule using the filter property. Adding a .gray class to the root element is enough to turn the whole page gray, and the technique works across most browsers with the provided vendor prefixes.