Convert an Image to Grayscale in HTML/CSS

The grayscale images consist of black, gray, and white color. More specifically, the gray color has multiple levels of shades. In HTML, users can convert the image into a grayscale with the help of the CSS “filter” property. Filter property is mainly used to define and set the visual effect of an image, such as rendering images, backgrounds, and borders.

In this tutorial, we will demonstrate how to convert an image to grayscale in HTML/CSS

How to Convert an Image to Grayscale in HTML/CSS?

To convert an image to grayscale in HTML/CSS, follow the given instructions.

Step 1: Add a div Container

First, add a div container in the HTML document by utilizing the “<div>” tag. Then, assign it a “class” attribute with a specific value. For instance, “img-grayscale” is used for class attributes.

Step 2: Insert Headings

Next, add the first level heading by using the “<h1>” tag, then embed the heading of level two with the help of “<h2>”.

Step 3: Add Image

After that, add an image using the “<img>” tag along with the required attributes:

The “src” attribute is used to add a URL of the image.
“height” is utilized for setting the height of the image in a container.
“width” defines the size of the image horizontally.
“alt” is utilized for adding the text that will be displayed if the image is not loaded due to some reasons:

<div class="img-grayscale">

<h1>Linuxhint Content Creators</h1>

<h2>Grayscale Image</h2>

<img src="TSL.png" height="250px" width="300px" alt="Grayscale" />

</div>

Output

Step 4: Access Class Attribute

Access the class attribute with the help of “.img-grayscale” and apply the “text-align” property to set the alignment of text.

Step 5: Style Heading

Apply the “color” property on the heading by accessing it with the tag name “h1”.

Step 6: Convert Image Into Grayscale

Now, access the image by utilizing the “img”:

.img-grayscale{

text-align:center;

}

h1{

color:rgb(83, 21, 197);

}

img{

filter: grayscale(100%);

}

Apply the “filter” property and set the value “grayscale(100%)” to convert the image into a grayscale.

Output

It can be noticed that the image has been converted into a grayscale image:

We have stated the method for converting an image to grayscale in HTML/CSS.

Conclusion

To convert an image to grayscale in HTML and CSS, add an image in a container with the help of the “<img>” tag. Then, access the image in CSS by tag name and apply the “filter” property with the value “grayscale(100%)”. This post has demonstrated the easiest method for converting an image to grayscale in HTML using CSS.