Convert an Image into Grayscale Image using HTML/CSS

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:

1^st 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:

Convert an Image into Grayscale Image using HTML/CSS

2^nd 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: