How to Make Images Grayscale with CSS

by Last Updated: Oct 15, 2023Blog, WordPress Tips

If you ever needed to make some images that you place on your website to be converted into grayscale color, you don’t have to edit them in Photoshop or any other graphical program. There is an easy way to make them grayscale with a few lines of CSS code. You may, for example, want to display partner logos on the homepage of your website. And if you also want all of them to be grayscale, I will explain you how you can do it easily.



First of all you need to set a CSS class for each one of the images that you want convert into grayscale. I will be using the CSS class named “gs”.

After that you need to add a CSS code to the Divi theme options custom CSS field. You will need to add the following code:


.gs {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.6;
    filter: alpha(opacity=60);


If you have noticed, the first 2 lines of this code convert the image(s) into grayscale. I also added another 2 lines of code that change the opacity of these images. I have set the opacity to 60%, so that the images are not too dark gray.

And just to demonstrate this CSS trick, I have applied this custom CSS code to the image with the Elegant Themes products logos that you can see above in this article. When you view just the default image, you will see that it is actually in color. You can check the original image here:

If you want to make grayscale just one image, you can apply the 4 lines of my CSS code (from inside the brackets) just to the Main Element Custom CSS field in the advanced options of your image module. I have done it this way on the image in this blog post.

And if you want to learn some more CSS and/or HTML (if you are a web designer, you should), you can check my other article in which I recommend some free online resources that can help you.

This is all for this tutorial. I hope you will find this tip helpful.

For more Divi tips & tricks like this one, feel free to subscribe to my newsletter.

5 Free WordPress Plugins You Should Use

Banner - Author Box for Divi Plugin


Author: Andrej

WordPress expert. Divi user since 2014. I blog about WordPress and Divi, my favorite WordPress theme. When I’m not working with WordPress or writing an article for this blog, I’m probably learning Italian. You can read more about me here.