# Duotone using CSS blend modes

> Discover how to create striking duotone image effects using CSS blend modes. Learn techniques to implement Instagram-like filters without image editing software.

Published 2017-10-26 by José M. Pérez · https://jmperezperez.com/blog/duotone-using-css-blend-modes/

In a past post I explained [how to use SVG and a `feColorMatrix` filter](https://jmperezperez.com/blog/duotone-using-fecolormatrix/) to apply a duotone effect to an image. This time I'm going to show how to achieve a similar effect with only CSS.

![Duotone effect on image using CSS blend modes](https://jmperezperez.com/static/images/posts/duotone.jpg)

Demo & Code: [https://codepen.io/jmperez/pen/wrVxga](https://codepen.io/jmperez/pen/wrVxga)

<iframe height="660" className="w-full" scrolling="no" title="Duotone effect (Spotify Duotone) - Using CSS Blend Modes" src="https://codepen.io/jmperez/embed/wrVxga?default-tab=result" frameBorder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/jmperez/pen/wrVxga">
  Duotone effect (Spotify Duotone) - Using CSS Blend Modes</a> by José Manuel Pérez (<a href="https://codepen.io/jmperez">@jmperez</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

The code consists of a `<div/>` that has an image set as a background. Then, we add a `::before` and an `::after` pseudo-elements with the colours we want to apply and the right blend modes.

Previously, my colleague Thodoris described how to achieve this effect [in JS using Canvas](https://blog.72lions.com/blog/2015/7/7/duotone-in-js) and [in iOS](https://blog.72lions.com/blog/2015/7/18/duotone-in-ios). I also reproduced it using [SVG and a `feColorMatrix` filter](https://jmperezperez.com/blog/duotone-using-fecolormatrix/).

This version is based on the technique described by Una Kravets:

[View post on X](https://x.com/i/status/923231326420922368)

which is also what the [colofilter.css](https://lukyvj.github.io/colofilter.css/) library is based on to achieve the duotone effect.