How To Make An Image Black & White In A WordPress Post

You can make your images in your content look very cool in black and white without editing the image. No plugin is required and it’s easy to do.

Here’s how to turn any image in a page or post on your WordPress powered website black and white.

Step 1: upload your image to your WordPress website and insert it into the content editor using an Image block.

Step 2: on the image block click the 3 dots and click the link titled ‘Edit as HTML’. This will now show the image code. Here’s what the ‘Edit as HTML’ link looks like if you can’t find it.

‘Edit as HTML’ to alter the coding of an image uploaded to WordPress

Step 3: Paste in this small line of coding (it’s called ‘grayscale’) at the end of the img src code:

style="filter: grayscale(100%);"

Here’s something like how the full code should look (it may contain other tags too such as ‘alt’, leave them all in there!):

<img src="your-image.jpg" style="filter: grayscale(100%);">

You can adjust the 100% value down to suit you. Test out different values until you’re happy with it.

Now let’ see the grayscale code in action with a demonstration. Firstly, here’s an image without a filter:

Busy mind
A man with a busy mind. Image in this compilation.

And now let’s show exactly the same photo again but this time with the grayscale filter coding added:

Busy mind
A man with a busy mind, image now in black and white.

This ‘grayscale’ coding isn’t specific to WordPress, it’s CSS. That means it’ll work no matter what CMS you use.

The above method will work well for many people’s needs. But if you have CSS coding knowledge this can also be achieved by adding a new CSS class to your custom stylesheet and adding the name of it into the ‘additional CSS Classe(es)’ part of the image block setting. Here’s an example:

.imageclassname {
  filter: grayscale(100%);
}

This will make it slightly quicker to do if you have many images to do. Because rather than click ‘Edit as HTML’ every time and paste the coding in, you’ll simply have to add the class name to the image block settings.

And that’s it. End of tutorial! A benefit of this method is it can save time editing a stock image before uploading. It can also be used to experiment on photographs when you’re unsure whether you want it full color or black and white.

Shareable image:

Apply grayscale to WordPress images