Turn Any Web Page Gray with a Simple CSS Grayscale Filter

Many websites were turned gray to commemorate a notable figure, and you can reproduce that effect yourself using a CSS grayscale filter that works on images, text, and UI elements.

Open the browser’s developer tools (F12), select the root html element, and add the following CSS rules to the style panel:

-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);

These rules apply the grayscale() filter, which converts the rendered output to shades of gray. The function accepts a percentage (0%‑100%); 0% leaves colors unchanged, while 100% produces full grayscale. Intermediate values, such as 60%, give a partially desaturated look.

According to MDN, grayscale() is a CSS filter function that returns a filter effect; the filter property can combine multiple effects, and other functions like blur(), sepia(), etc., are also available.

Browser support is broad: modern versions of Chrome, Edge, Firefox, Opera, and Safari all implement grayscale(). Internet Explorer does not support this filter.

To see the effect, experiment with different percentages in the CSS rule and observe the page turning from normal colors (0%) to partially gray (60%) and finally fully gray (100%).