How to Make Images Grayscale with CSS

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:

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.

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.