How to Turn Your Website Grayscale with Simple CSS Tricks
Learn four straightforward methods to render an entire webpage in grayscale—by editing CSS files, adding inline styles in the head, modifying the HTML tag, or applying universal CSS filters—complete with code snippets for each approach.
On occasions like Qingming, national mourning days, or anniversaries of influential figures, site owners often turn their entire website grayscale to pay respects.
This article shows how to achieve that effect with just a few lines of CSS, offering four different implementations.
Method 1: Modify the CSS file
Add the following rule to your stylesheet to make the whole page appear in grayscale.
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}Method 2: Insert inline CSS in the tag
If you prefer not to edit external files, place this style block inside the page’s <head> section.
<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}
</style>Method 3: Add inline style to the tag
Alternatively, apply the filter directly on the <html> element.
<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%);">Method 4: Apply a universal CSS filter
This rule targets all elements and works across major browsers.
body * {
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /* firefox */
-ms-filter: grayscale(100%); /* ie9 */
-o-filter: grayscale(100%); /* opera */
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter: gray; /* ie9- */
}All these methods rely on CSS filters; choose the one that best fits your workflow.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Programmer DD
A tinkering programmer and author of "Spring Cloud Microservices in Action"
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.