In this article, we will go through how to create a grayscale version of an image.
Having a coloured image, the aim is to convert it to grayscale using CSS properties. To convert an image to grayscale, we mainly use the CSS filter property. The filter feature is mostly used to alter the visual appearance of a picture.
Syntax:
filter: grayscale() 1st Method:
To turn an image to grayscale, apply the filter grayscale(100%).
<!DOCTYPE html>
<html>
<head>
<title>Abc...</title>
<style>
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
h1 {
color:red;
}
</style>
</head>
<body>
<center>
<h1>javaTpoint</h1>
<h2>Grayscale Image</h2>
<img src=
"https://static.javatpoint.com/blog/images/when-was-google-created.png"
width="300px" height="150px" alt="filter applied" />
</center>
</body>
</html> Output:
2nd Method:
<!DOCTYPE html>
<html>
<head>
<title> Abc...</title>
<style>
img {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
img:hover {
-webkit-filter: grayscale(0);
filter: none;
}
h1 {
color:red;
}
</style>
</head>
<body>
<center>
<h1>javaTpoint</h1>
<h2>Grayscale Image</h2>
<img src=
"https://static.javatpoint.com/blog/images/when-was-google-created.png"
width="300px" height="150px" alt="filter applied" />
</center>
</body>
</html> Output:
