Convert an image into grayscale image using HTML/CSS
In this article, we will learn how to convert an image into a grayscale image using CSS properties. CSS provides a filter property that can be used to apply visual effects to an image. In our case, we can use this property to convert an image into a grayscale image.
The grayscale()
filter in CSS can take values between 0
and 1
. Here’s what these values represent:
Value
|
Description
|
0
|
Represents no grayscale effect, meaning the image remains in full color.
|
1 or 100%
|
Represents full grayscale, making the image completely black and white.
|
Syntax:
filter: grayscale()
Example 1: In this example, use filter: grayscale(100%) to convert an image into grayscale.
html
<!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 >
< h1 >GeeksforGeeks</ h1 >
< h2 >Grayscale Image</ h2 >
< img src =
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.
html
<!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 >
< h1 >GeeksforGeeks</ h1 >
< h2 >Grayscale Image</ h2 >
< img src =
width = "500px"
height = "250px" alt = "filter applied" />
</ center >
</ body >
</ html >
|
Output:
Last Updated :
30 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...