Converting an Image to Grayscale using CSS3

CSS Web Development Front End Technology

To convert an image to Grayscale in CSS3, use the grayscale value for filter property.

Example

Let us see an example −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
   filter: brightness(120%);
   filter: contrast(120%);
   filter: grayscale(130%);
}
</style>
</head>
<body>
<h1>Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring" width="160" height="150">
<h1>Learn MySQL</h1>
<p>Below image is brighter and has more contrast than the original image above. With that the image is in grayscale:</p>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring" width="160" height="150">
</body>
</html>