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

I’m writing every article I think will help you in some way. in that respect How to Make Colorful Image as Grayscale (Black and White) Using Pure CSS3 Grayscale Filter This article will be very useful for you.

There are various ways to convert images to black and white, but using CSS is the most appropriate approach because the layout, colors, textures, shadows are all part of the CSS.

Additionally, the CSS grayscale function can be combined with animations, transitions, and hovers.

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

index.html

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


<style>

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

</style>

Read Also: Build a Custom Styled Scrollbar for All Browsers in HTML5 and CSS3

Final Thoughts

How to Make Colorful Image as Grayscale (Black and White) Using Pure CSS3 Grayscale Filter Thank you for reading this useful article. Also, let us know if you have any doubts about this article. We are committed to helping you.

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

Share on:

Leave a Comment