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:
Duotone images are so #trendy right now 😎
— Una Kravets 👩🏻💻 (@Una) 25 October 2017
Had some airport time so I drew out how to get this effect w/one div in CSS 😊 #devdoodles pic.twitter.com/WENOWlwcUY
which is also what the colofilter.css library is based on to achieve the duotone effect.