If you’re anything like most other designers, your experience with blend modes in Adobe applications is usually one of “Hmmm, I wonder which one of these will work this time?"

Now that blend modes are in CSS, we want to eliminate at least some of that confusion so that we can create great designs without guesswork.

The first clue to understanding blend modes actually comes from looking at the blend options available in an Adobe application. For example, PhotoShop CC on a Mac:

You can see that the modes are subtly divided by lines, creating groups. The first group, Normal is the default mode, so we can ignore that for now. We can also ignore Dissolve, as that has not been ported to CSS. The second and third groups give us some insight. They are the darken and lighten groups, and, when applied, follow some fundamental rules:

Darken modes will always darken the layer to which they are applied.

Lighten modes will only ever lighten the layer they’re applied to.

We can demonstrate this easily. Given an image on top of a neutral background:

<div id="blend-mode-example">
	<img src="woman-in-blue-dress.jpg" alt>
</div>

And applying the following CSS:

#blend-mode-example { background: #fff; }
#blend-mode-example img {
	width: 100%; height: auto;
	mix-blend-mode: darken;
}

We can see the result of manipulating the background color through the greyscale range (white to black) by attaching a range element and some JavaScript, shown in the example above. Try changing the background color from white to black using the slider; then try switching the mode to Lighten and sliding again.

Note that when the background is completely black, lighten makes no difference to the image. As the luminosity of the background increases, the darkest areas of the image are affected first - the shadows in the model’s dress, in the example above - with lighter areas increasingly affected until the until image washes out to white.

With darken mode on the image, the opposite is true: a pure white background affects the foreground not at all, but darker shades increasingly affect the lightest portions of the image (skin tones and the rock foreground, in this example) until it completely fades to back.

Other Lighten and Darken Modes

If lighten are darken are opposites, it follows that the other modes in each set, screen and multiply, must be too.

screen and multiply affect the tonal range of the layer differently: moving the slider in either mode allows and clicking the various options allows you to see that screen and multiply affect the colors in the affected image pretty much evenly.

Variations

Of course, things get more complicated when the background layer is not a shade of grey, but the same rules apply: lighten modes always lightens the layer, darken modes always darken. It’s just that now the affected layer is “hinted" with the underlying color; the degree to which this occurs depends on the color’s distance from black or white and the mode applied.

Photograph by Marketa Novak, licensed under Creative Commons; slider style by Ana Tudor, from her excellent collection

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/yyxKRq