Convert an Image into Grayscale Image using HTML/CSS

A grayscale image is an image that displays only shades of gray, without any color, representing varying levels of light intensity. You can easily convert an image to grayscale in HTML/CSS by applying the filter: grayscale(100%) property to desaturate the colors.

The grayscale() filter in CSS can take values between 0 and 1. Here's what these values represent:

Converting an Image to Grayscale Using CSS filter property

The CSS filter: grayscale(100%) property is used to convert an image into grayscale, removing all colors and leaving only shades of gray. This effect can be applied to any image, creating a monochromatic or black-and-white appearance effortlessly.

Syntax

filter: grayscale()

Examples to Converting an Image to Grayscale Image

Example 1: In this example we applies a grayscale filter to an image using the filter: grayscale(100%) CSS property. The image is displayed in black and white, with text explaining the effect.

Output:

Example 2: In this example, use filter: grayscale(1) to convert an image into grayscale.

Output: