In this lesson, we use CSS pseudo-elements and the mix-blend-mode
property to create a duotone effect for an image.
We wrap the image in a container element and overlay it with pseudo-elements that have different background colors. Then using mix-blend-mode
, we blend those overlays through the stacking context to create a duotone style effect.
<div class="doutone"> <img src="" alt="" /> </div>
.duotone { position: relative; } .duotone:after, .duotone:before { content: ""; position: absolute; height: 100%; width: 100%; top: 0; left: 0; } .duotone:after { background-color: hsl(280, 80%, 50%); mix-blend-mode: lighter; } .duotone:before { background-color: hsl(90, 80%, 50%); mix-blend-mode: darken; }