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

Jhey Tompkins: [0:00] We have an image and we're going to use CSS pseudo-elements to create our effect. CSS pseudo-elements can't be used with the image tag, so we create this wrapper element. We've given it the class duotone.

[0:10] The idea is to cover that wrapper element with two absolutely positioned pseudo-elements, so we apply position: relative to our wrapper.

[0:19] Next, we need to populate those two pseudo-elements. To do this, we use content and we can leave it as an empty string. To cover the parent element, we use position: absolute, with a height: 100% and a width: 100%, and we set top: and left: .

[0:40] We won't see anything until we apply some color, so let's apply a background-color. We will go with hsl(, 80%, 50%), which gives us a red color. For our before pseudo-element, let's go with a blue color, hsl(220, 80%, 50%).

[1:02] At the moment, our image is completely blocked by the two pseudo-elements. We see a red square because the after pseudo-element sits higher than the before pseudo-element.

[1:12] For the duotone effect, we can use mix-blend-mode, and for the after pseudo-element, we're going to use the lighten value. See how our square has changed color to this almost lilac/pink color.

[1:24] That is because the mix-blend-mode property defines how an element's content should blend with its background. In this case, the parent's background, and currently, the blue of the before pseudo-element, so we get this blend where we have a pink color.

[1:37] For our before pseudo-element, we're going to use mix-blend-mode with the value darken. Now, we have the duotone effect on our image.

[1:45] There are various values for mix-blend-mode. In this example, we've decided to use lighten and darken. This means that the background is replaced where the content is either lighter or darker, depending on the value lighten or darken.

[1:58] It's worth experimenting with different color combinations to see what kind of effect you can achieve. Experimenting with different mix-blend-mode values will also yield different results.

[2:09] In review, we can use CSS mix-blend-mode to create a duotone effect for an image by using two CSS pseudo-elements of a containing element around our image.

[2:18] We've used the mix-blend-mode values lighten and darken, and we've experimented with different color combinations.