Free tools Windows power users keep installed
One-click scans. No signup required.
To make selected WordPress images display in true grayscale, add a CSS class to each Image block and apply filter: grayscale(100%); to the image. WordPress’s built-in image filter is duotone, which creates a two-color treatment rather than neutral grayscale. CSS changes the displayed appearance, not the uploaded image file.
Choose the method that fits the result you need
| Method | What it does | Scope | Best for |
|---|---|---|---|
| CSS class and grayscale filter | Displays the image in true grayscale | Only blocks with the class | Selected images, including optional hover effects |
| WordPress duotone control | Applies a two-color treatment | Supported blocks; can also be set as a Global Styles default | Branded or stylized effects |
| Convert a copy in an image editor | Alters the image file to grayscale | The converted file wherever it is used | Images that must be grayscale outside the page, such as downloads or print |
Make selected images grayscale with CSS
-
Edit the page or post and select the target Image block.
-
Open the block’s Advanced settings and enter
grayscale-imagein the CSS class field. Do not include a leading period. -
Add this rule in the custom CSS area available for your site:
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteSpecial offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy..grayscale-image img { filter: grayscale(100%); }The custom CSS location varies with the theme and site setup, so check the controls your site provides.
-
Save the page and inspect it on the front end. The image should appear grayscale while the original uploaded file remains unchanged.
The example selector assumes the class is on a block wrapper containing an image. If nothing changes, inspect the rendered markup and the theme’s styles: the image may need a different selector, or another rule may be overriding the filter. WordPress’s Image block documentation describes adding a CSS class in Advanced settings: Image block documentation.
Use WordPress’s built-in duotone controls for a stylized effect
Select an image and use the block toolbar’s duotone control or the Styles panel when available. WordPress says, “You can create a filter effect on images without actually changing the original image.” Duotone maps shadows and highlights to chosen colors. Black and white choices can look grayscale-like, but they are still a two-color treatment, not a neutral grayscale conversion.
WordPress documents filter controls for Image, Cover, and Gallery blocks. Global Styles can set a filter default for existing and new images, making it broader than adding a class to selected blocks. Available controls can vary with the editor, theme, and site customizations. See the Filters Settings overview and Colors Settings overview.
Make an image grayscale only on hover
For a linked image that should turn grayscale only while a pointer is over it, scope the CSS filter to the hover state. This is a CSS extension, not a built-in WordPress editor option. Check the rendered markup and theme selectors, and consider keyboard and touch users: hover does not work the same way on every input device. If the effect conveys information, provide another way to access that information.
Rank #4
When to convert the image file instead
If the image must remain grayscale when reused elsewhere—for example, in a download or print layout—convert a copy in an image editor and upload or replace it with that version. Keep the color original if you may want to reverse the change. A display filter is preferable when you want the WordPress page to look grayscale without altering the source file.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Recommended Free Tools
