Duotone using CSS blend modes

In a past post I explained how to use SVG and a feColorMatrix filter to apply a duotone effect to an image. This time I’m going to show how to achieve a similar effect with only CSS.

Demo & Code: https://codepen.io/jmperez/pen/wrVxga

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 and in iOS. I also reproduced it using SVG and a feColorMatrix filter.

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

which is also what the colofilter.css library is based on to achieve the duotone effect.