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.