Computer >> Computer tutorials >  >> Programming >> CSS

Adjusting the Saturation of Images using CSS3


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 −

<!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

Adjusting the Saturation of Images using CSS3