DEV Community

Jaydeep Pipaliya
Jaydeep Pipaliya

Posted on

4

How to Apply a Duotone Effect to Images with CSS

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>

Enter fullscreen mode Exit fullscreen mode




RESULTS

Output of the Code
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! 🌈

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)