[CSS] Use CSS pseudo-elements and mix-blend-mode to Create a Duotone Style Effect

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;
}