During My Professional web development, I need a black and white image of a colorful image. At that time, I have decided that I would not use Adobe Photoshop or Any Other Photo Editor Software, but I would like to use CSS.
I have got many solutions from google, but There was no cross-browser compatibility. Finally, after googling, I got cross-browser compatible CSS to make the image black and white and remove that effect.
To make the Image black and white, I have used the below CSS :
.black-white-img { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ }
And to remove the effect of black and white, I have used the below CSS:
.colorful-img { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); -webkit-filter: grayscale(0%); }