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!