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.
<!DOCTYPE html>
<html>
<head>
<title>Convert into grayscale image</title>
<style>
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
h1 {
color: green;
}
</style>
</head>
<body>
<h2>Convert into grayscale image byb using filter property </h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/interview-preparation-2.png"
width="500px"
height="250px"
alt="filter applied" />
</body>
</html>
Output:
Example 2: In this example, use filter: grayscale(1) to convert an image into grayscale.
<!DOCTYPE html>
<html>
<head>
<title>Convert into grayscale image</title>
<style>
img {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
img:hover {
-webkit-filter: grayscale(0);
filter: none;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h2>Convert into grayscale image by using filter property</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/interview-preparation-2.png"
width="500px"
height="250px" alt="filter applied" />
</center>
</body>
</html>
Output:
