Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Applying Sepia Effect to Images using CSS3
The CSS filter property allows you to apply visual effects to images, including the sepia effect which gives images a warm, vintage appearance reminiscent of old photographs.
Syntax
selector {
filter: sepia(percentage);
}
Possible Values
| Value | Description |
|---|---|
0% |
No sepia effect (original image) |
50% |
Moderate sepia effect |
100% |
Complete sepia effect |
Example: Complete Sepia Effect (100%)
Here, we apply a full sepia effect to create a vintage look −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
align-items: center;
margin: 20px;
}
.original {
text-align: center;
}
.sepia-full {
filter: sepia(100%);
text-align: center;
}
img {
width: 200px;
height: 150px;
border: 2px solid #ddd;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="original">
<h3>Original</h3>
<img src="/spring/images/spring-mini-logo.jpg" alt="Original Image">
</div>
<div class="sepia-full">
<h3>Sepia 100%</h3>
<img src="/spring/images/spring-mini-logo.jpg" alt="Sepia Image">
</div>
</div>
</body>
</html>
Two images displayed side by side: the original image in full color, and the same image with a complete sepia effect that gives it a warm, vintage brown tone.
Example: Partial Sepia Effect (50%)
This example demonstrates a moderate sepia effect for a subtle vintage look −
<!DOCTYPE html>
<html>
<head>
<style>
.comparison {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
max-width: 600px;
margin: 20px auto;
text-align: center;
}
.image-box img {
width: 150px;
height: 120px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.sepia-0 {
filter: sepia(0%);
}
.sepia-50 {
filter: sepia(50%);
}
.sepia-100 {
filter: sepia(100%);
}
</style>
</head>
<body>
<div class="comparison">
<div class="image-box">
<h4>0% Sepia</h4>
<img class="sepia-0" src="/spring/images/spring-mini-logo.jpg" alt="No sepia">
</div>
<div class="image-box">
<h4>50% Sepia</h4>
<img class="sepia-50" src="/spring/images/spring-mini-logo.jpg" alt="Moderate sepia">
</div>
<div class="image-box">
<h4>100% Sepia</h4>
<img class="sepia-100" src="/spring/images/spring-mini-logo.jpg" alt="Full sepia">
</div>
</div>
</body>
</html>
Three images displayed in a grid showing the progression of sepia effect: the first is the original image, the second has a moderate warm tone, and the third has a full vintage sepia appearance.
Conclusion
The CSS filter: sepia() property provides an easy way to create vintage photo effects. Use values from 0% (no effect) to 100% (full sepia) to achieve the desired vintage appearance for your images.
Updated on: 2026-03-15T13:45:34+05:30
406 Views
Advertisements