PhotoShop’s blend modes now in CSS via the new mix-blend-mode and background-blend-mode properties, and supported in all modern browsers, with the current exception of Internet Explorer and Opera. Values for the properties – lighten, multiply, hard-light, etc – are exactly the same as those in Adobe applications. It’s been my experience that relatively few people understand what blend modes are exactly, even among those who use Photoshop on a daily basis. In practice, it’s usually a case of choosing a particular mode because the result “looks right”.

We don’t want to carry that state of ignorance into web development. In this article, I will illustrate what the basic blend modes are and how they work, with the goal of killing two birds with one stone: whether you’re interested in PhotoShop or want to play with CSS blending, what follows should be helpful regardless.

In both Adobe applications and CSS, elements must be layered (i.e. have something behind them) in order for blends to have any effect. A PhotoShop document will typically consist of many layers, and HTML elements will always have at least the body behind them. “Normal” blend mode (in CSS, normal) is the default, and under these conditions element's colors do not interact.

Obviously we already have some properties that affect the color of layered pixels: opacity is one candidate. For now, let’s stick to blend modes exclusively.

Not every blend mode has been translated from PhotoShop into CSS: as of this writing, we have access to multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference and exclusion, together with the filters I’ve covered in the past. But if you can understand just the first three of those, everything else will follow.

Screen mode

Ignores black, making things lighter. Imagine two projectors splashing images onto the same screen. The combined light pattern can’t make the result “more black”, and lighter tones will appear washed out.

Multiply mode

The opposite: it ignores white and makes things darker. If you’re old enough, think of the effect of sandwiching two 35mm slides together and trying to look through the joined result. Light moves easily through overlapped areas that are clear or bright, but darktones reinforce each other.

Overlay mode

A balance between screen and multiply: it ignores mid-tones, making the blended result lighter and darker at the same time. In other words, it increases contrast.

As an introduction, let’s put black, white and grey elements in front of a single-color background. In HTML and CSS the code would be:

body {
	background: #c27a0e;
	margin: 2.5%;
}
div {
	width: 25%;
	height: 25vw;
	margin: 4%;
	float: left;
}

<div style="background:black"></div>
<div style="background:grey"></div>
<div style="background:white"></div>

We’ll take the example through screen, multiply and overlay blend modes. Note that as of this writing -webkit-blend-mode for elements is only supported in the experimental browser provided by Adobe.

Screen blend mode

In PhotoShop, changing the blend mode is as simple as switching it in the layers palette, with the affected layer(s) selected. In the new CSS spec, it is almost as easy:

div {
	-mix-blend-mode: screen;
}

As you can see, the result is that the black square disappears entirely, absorbed by the background color. The grey square is lightened, while the white square remains unaffected.

Multiply mode

The same setup as before, only with the multiply value applied:

The reverse occurs: black is unaffected, grey darkens, influenced by the background color, and white disappears.

Overlay mode

Grey disappears; black and white are shifted by the background color.

Practical Applications

Support for blending modes means a great deal more graphical flexibility in displaying images in the browser. For example, blending a photograph with a background color in HTML and CSS:

body {
	background: #f00;
}
img {
	mix-blend-mode: multiply;
}

<img src="future-girl.jpg" alt="Photograph of girl in a futuristic hood">

Result of blend mode changes on an image

multiply	screen

This means that we’ll be able to customize the appearance of an image directly in CSS, without having to alter the original file, just as we do with filters.

Even more exciting is the possibility of truly blending two images together in multilayered backgrounds:

html, body {
	min-height: 100%;
}
body {
	background: url(future-girl.jpg),
		url(circuit-board.jpg); 
	background-repeat: repeat-x, no-repeat;
	background-size: auto, cover; 
	background-position: center bottom, left top; 
	background-blend-mode: multiply, normal;
}
h1 {
	color: white;
	text-transform: uppercase;
	font-size: 5rem;
	text-align: center;
	font-family: Futura, sans-serif;
	text-shadow: 0 0 5px rgba(0,0,0,0.3);
}

The result looks like this:

Note that this is achieved without any need for complex masked PNGs.

All of the other blend modes are simply variations on these three properties; I’ll cover those in future articles.

Circuit board photograph by Creativity103, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.