Converting an Image to Grayscale using CSS3

CSSWeb DevelopmentFront 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>

Output

raja
Published on 30-Dec-2019 10:00:18
Advertisements