Adjusting the Saturation of Images using CSS3

CSSWeb DevelopmentFront End Technology

To saturate the image with CSS3, use the saturate property value for filter property.

Example

Let us see an example to adjust saturation of images −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
   filter: saturation(500%);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>

Output

raja
Published on 30-Dec-2019 15:06:48
Advertisements