Convert an Image to Grayscale using CSS

2022-08-12
I spend a lot of time on twitter recently. And it is really awesome to see so much people sharing tips and tutorials over there. Recently I learned how to use the CSS grayscale filter over there 🤓
# Using filter: grayscale()
The basic usage is simple: grayscale(amount)
filter: grayscale(0); /* no grayscale */
filter: grayscale(0.20); /* going grayish */
filter: grayscale(60%); /* going further */
filter: grayscale(1); /* no more colors! */
You can play around with it using the example on developers.mozilla.org (opens new window)! 🎮
Check out the original tweet from @Krishn_aGupta (opens new window) to give him your kudos!