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

Jhey Tompkins
InstructorJhey Tompkins
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

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.

egghead
egghead
~ a minute ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today