Blend modes illustrated

blend modes now in 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 or want to play with CSS blending, what follows should be helpful regardless.

Setup for the example in PhotoShop

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.

Blend mode options in PhotoShop

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.

Black, white and grey squares before a colored backgroundAs 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.

An example of screen mode on black, white and grey elements

Multiply mode

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

An example of multiply mode on black, white and grey elements

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

Overlay mode

An example of overlay mode on black, white and grey elements

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

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),
	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:

Welcome to the future

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 to learn more.