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. 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: https://divitheme.net/wp-content/uploads/2017/08/make-images-grayscale.png

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.