How to Make Your Website Grayscale with One Line of CSS

In times of national mourning, many websites adopt a grayscale theme as a sign of respect. This can be implemented with a single line of CSS.

How to Apply Grayscale to Your Website

Add the following CSS code to your website. You can place it at the beginning of your theme's style.css file or use a custom CSS plugin/feature.

html {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

Code Explanation

• Core Property: filter: grayscale(100%); converts all colors on the page to shades of gray.
• WebKit Prefix: -webkit-filter ensures compatibility with older WebKit-based browsers (e.g., older Chrome, Safari). Modern browsers support the standard filter property.
• IE Compatibility: filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); is for legacy Internet Explorer (versions 6-9).
• For maximum compatibility, include all three lines. This effect applies to all elements, including images, videos, and backgrounds.

Note: The original post contained a placeholder/encoding error. The code above uses the correct percentage symbol and property values.