How to Apply a Duotone Effect to Images with CSS
Jaydeep Pipaliya
Posted on April 4, 2024
Understanding CSS Filters
The core of this technique is the filter CSS property. CSS filters allow us to apply graphical effects like blurring, brightness, contrast, and more to any element. For creating a duotone effect, we'll use a combination of grayscale() and sepia(), topped off with a color overlay using blend-mode.
Setting Up Your HTML Document
Let's start by setting up a basic HTML structure. We'll include an image that we want to apply the duotone effect to. For demonstration purposes, I'll use a placeholder image. Feel free to replace it with your own.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Duotone Image Effect</title>
<style>
body {
background: #333; /* Dark background for contrast /
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.duotone-img {
width: 300px;
height: auto;
filter: grayscale(100%) sepia(100%);
mix-blend-mode: screen;
}
.duotone-overlay {
position: absolute;
background-color: #008080; / Teal overlay */
mix-blend-mode: color;
width: 300px;
height: auto;
}
</style>
</head>
<body>
<div class="duotone-overlay"></div>
<img src="your-image-url-here" class="duotone-img" />
</body>
</html>
RESULTS
How It Works
In the CSS, we first convert the image to grayscale and then apply a sepia filter to add a warm tone. The real magic happens with the .duotone-overlay element. By setting a background color and using mix-blend-mode: color, we overlay the image with a color tint, achieving the duotone effect.
Thank you for reading, and happy coding! 🌈
Posted on April 4, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
