How to Make Images Grayscale with CSS

by | Last Updated: Aug 29, 2017 | Blog, WordPress Tips

If you ever needed to make some images that you place on your website to be converted into grayscale, 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: http://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.

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

5 Free WordPress Plugins You Should Use

Divi Theme Design Services
Share This