How to Turn an Entire Website Grayscale with a Few CSS Lines
This article explains how to apply a global CSS grayscale filter to make every element on a website appear in shades of gray, discusses compatibility considerations, and provides a concise code example that works across major browsers.
Background
Recently many websites and apps have switched their pages to a grayscale or black‑and‑white appearance to commemorate a day of mourning.
Problem
The author wonders how to make every element—images, buttons, text—appear gray across an entire site without editing each component individually.
Considerations
Applying a global CSS rule works, but for large portals such as JD, Taobao, or Tencent the manual effort would be high.
Solution
A minimal approach is to add a global filter: grayscale(100%) rule to the html element and include vendor‑prefixed equivalents for Safari and Chrome. The following HTML demonstrates the technique:
<!DOCTYPE html>
<style type="text/css">
html {
filter:grayscale(100%);
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter:grayscale(1)
}
</style>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>...</title>
</head>
<body style="margin:0;padding:0;box-sizing:border-box;">
<script type="module" src="/src/main.js"></script>
</body>
</html>Explanation
The filter property creates a grayscale filter that affects all descendant elements, turning the page white‑on‑gray. Vendor prefixes ( -webkit-filter, -moz-filter, etc.) address compatibility issues in Safari and Chrome.
Result
The rendered page shows a completely desaturated layout, as illustrated by the screenshot.
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.
Coder Trainee
Experienced in Java and Python, we share and learn together. For submissions or collaborations, DM us.
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.