Applying a Black-and-White CSS Filter to a Website
This article explains how to add a simple CSS snippet that applies a full-page grayscale filter, turning a website black-and-white, including the code, usage instructions, and notes on compatibility and alternative JavaScript methods.
On November 30, 2022, following the death of Jiang Zemin, many websites changed their style to black, white, and gray to express deep mourning.
The article shares a simple CSS snippet that applies a full‑page grayscale filter.
Black‑and‑White CSS Code
html{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}It is straightforward: add this code to the top of your CSS file or inside a <style> block in the <head> of your HTML.
Usage Tutorial
This code turns the entire site black‑and‑white; placing it at the beginning of your CSS will apply the effect site‑wide.
Resulting Black‑and‑White Screenshot
If your site does not use an external CSS file, insert the snippet between <head> and </head> tags, remembering to wrap it with <style> tags.
Some sites may not see the effect because they do not follow the latest web standards; updating the document type declaration can resolve this.
Although a JavaScript method can also achieve a grayscale effect, the CSS approach is recommended for better performance and fewer side effects.
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.
php Courses
php中文网's platform for the latest courses and technical articles, helping PHP learners advance quickly.
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.