Convert images to black and white using CSS Filter

This is the easy ways to turn color image to grayscale mode in CSS without using JavaScript. This can be useful when you want to add a grayscale-to-colour hover effect to your images.

What is CSS Filter?

The CSS filter property provides for effects like blurring or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, background or border.

grayscale()

We can make image black & white mode using grayscale() CSS filter. The value of ‘amount’ defines the proportion of the conversion. A value of 100% is completely grayscale. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of 0 is used.

filter: grayscale(100%);

Example