Applying Sepia Effect to Images using CSS3

CSSWeb DevelopmentFront End Technology

To apply sepia effect to images using CSS3, use the sepia value for filter property.

Example

The code is as follows −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
   filter: sepia(100%);
}
</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
Updated on 30-Dec-2019 10:27:37

Advertisements