To convert a colored image to black and white in CSS we use the filter property in combination with the grayscale() function. The grayscale() function allows you to adjust the amount of gray color in a colored image.
The default value of the grayscale(%) function is 0 which represents the original image. Any value higher than 0 adds a gray color to the colored image.
A black and white image is nothing but a colored image containing 100% amount of gray. It means if we pass the value 100% to the grayscale() function, it will convert the colored image into a completely black and white image.
See the following example, where we have converted a fully colored image into a completely black and white image:
Example:
img{
filter: grayscale(100%);
}
You can also make the image semi black and white by passing the value 50% to the grayscale() function.
See the following example:
Example:
img{
filter: grayscale(50%);
}
