How to Make Colorful Image as Grayscale (Black and White) Using Pure CSS3 Grayscale Filter

Hey reader! If you are looking to know about How to Make Colorful Image as Grayscale (Black and White) Using Pure CSS3 Grayscale Filter then you are in the perfect tutorial. Shall we start the discussion? Let’s go.

How to Make Colorful Image as Grayscale (Black and White) Using Pure CSS3 Grayscale Filter

How to Make Colorful Image as Grayscale (Black and White) Using Pure CSS3 Grayscale Filter

In order to get started, you need to make a index.html file and copy-paste the following code

index.html

<img class="bw-img" src="girl-in-green.jpg">


<style>

.bw-img {
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
}

</style>

Final Thoughts

I hope this article helps you to know about How to Make Colorful Image as Grayscale (Black and White) Using Pure CSS3 Grayscale Filter. If you face any issues please let me know via the comment section. Share this article with other CSS and HTML developers via social networks.

Share on:

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Comment