Illustration by

Blending Modes Demystified

Web imagery increasingly tends toward losslessness. When we make changes to a design or graphic, we want to be able to apply them without damaging the source material. That way, the original is preserved if we ever need to revert back or make other adjustments.

Article Continues Below

One of the latest capabilities to fall into the hands of web designers is image processing with blending modes. Blending modes allow us to easily create colorization and texturization and apply other special effects without having to crack open an image editor. This saves time by not having to manually reprocess graphics whenever a change is needed, and prevents the headache of having to recall the exact settings of a visual standard that may have been created months earlier. Instead, graphics can be neatly specified, maintained, and manipulated with a few CSS declarations.

Blending modes explained#section1

Technically, color blending applies mathematical operations to the color components of image pixels. That’s right, underlying all this creative stuff is math! Don’t worry, you don’t need to memorize formulas to use blending modes, but it’s worth at least having a cursory understanding of how blending works under the hood.

There are 15 new blending modes recommended by the W3C. Information abounds about how the different blending modes work, and there’s no one right way to use each one. Let’s look at just a few of the more useful modes in depth. Here are three of the most common ways I use blending modes in my workflow:

  • Transparency
  • Texturing
  • Colorization

Transparency effect with multiply#section2

Let’s start with multiply. This mode’s mathematical formula can be broken down like so:

x = a × b

That’s it. It literally multiplies the color on the top layer (a) with the layer below it (b) to get the resulting color (x), hence the name multiply.

But how do you multiply colors? It works like this: on computer screens, colors are built using red, green, and blue channels. Each of those channels is given a luminance value—a number that dictates how bright they’re supposed to shine. Now that we have numbers, we can do mathy things!

When we use the multiply blending mode, the computer takes the luminance value of the red channel for both layers, converts them to a scale between zero and one, and multiplies them together. Then it does the same for the green and blue channels. Once it has all of the totals, it recombines those channels into the resulting color.

That’s all well and good, but what’s the practical effect?

One of my favorite things to use multiply for is to shortcut my way through bad assets. Have you ever begged for a nice sharp vector version of a client’s logo, and all you could get your hands on was a JPG, complete with the white background of the letterhead it was hastily scanned from? Instead of retracing the logo by hand or working your marching-ants magic, you can use multiply. The following example shows how it works.

Image showing two layers without any blending applied.
The two layers without blending.

Image showing two layers after the multiply blend mode has been applied.
The two layers with the multiply blend mode applied.

Once multiplied, the black pixels on the top layer display at their full value: black. The white pixels, on the other hand, don’t show up at all. They’re completely transparent. The grading shades of gray along the edges of the letters will darken the layer below. This provides a nice smooth edge with minimal processing effort. It’s as if the graphic had a transparent background all along.

This particular trick only works if you’re using black assets. If the source has a color, that will colorize the result to some degree. However, if your asset is white, you can use the screen blending mode.

Dust and scratches with screen#section3

The functional opposite of multiply is called screen. Wait a minute, if it’s the opposite of multiply, why isn’t it called divide? The answer lies, once again, in the math:

x = 1 − (1 − a) × (1 − b)

It’s not called “divide” because we’re actually doing more multiplying! This time we’re multiplying the inverse of a times the inverse of b and then inverting it once more. The result is that now white pixels on the top layer are completely opaque, while black pixels are transparent. Every tint in between now lightens the layer below.

In the following example, I wanted to give my photo an aged look, so I took a scan of dust and scratches and blended it with screen. I also decided to use this same blending mode to wash out my photo using a lavender color for effect.

Blending with a layer of dust and scratches and a layer of lavender.
Blending with a layer of dust and scratches (available from Spoon Graphics) and a layer of lavender.

The image with the two layers on top of it applied with the screen blending mode.
The image with the two layers on top of it applied with the screen blending mode.

Incidentally, some software applications do have a divide mode, but it doesn’t exist in the W3C spec. (I don’t mourn the loss. I’ve never had a need for it.)

Colorizing with hue and color#section4

All blending modes have the potential to shift the color of a graphic, but two are particularly useful for colorization: hue, and the aptly named color mode.

Hue#section5

This blending mode takes the hue component of the overlapping layer and applies it to the colors below, while leaving the saturation and luminosity unmodified. I can overlap distinctly different colors but still get the exact same result, as long as their hue values match. In the case of the following image, my three brown hues are all set at 26 degrees, but the photo looks the same no matter which shade is blended.

Image showing three distinct brown hues (all set at 26 degrees).
Image showing that the result looks the same no matter which shade is blended.

Color#section6

This blending mode affects both the hue and saturation of the source, while ignoring luminosity. A reddish-brown overlay will turn the pixels of the source reddish-brown, just as it will with the hue mode, but will also make them the same saturation, which usually creates more of a striking colorization effect than hue alone.

Image showing that a reddish-brown overlay turns the pixels of the source reddish-brown, just as it will with the hue mode, but will also make them the same saturation.
A reddish-brown overlay turns the pixels of the source reddish-brown, just as it will with the hue mode, but will also make them the same saturation.

You can achieve the same effect if you reverse the order of your layers, putting the color below the photo, and blending the photo with the luminosity blending mode.

Cross-browser blending#section7

Using these blending modes, we can now apply Photoshop-level blending solely with CSS. But even though each browser is using the same math, you may find that sometimes the results differ noticeably.

Chart showing the blending modes as rendered across different browsers.

Color management is a complex world, and while the W3C recommends defaulting to the sRGB color profile, support from vendors is inconsistent. Each browser renders color according to its own whims. For example, Chrome renders images in its default “unmanaged” color space unless the image is tagged with a color profile. Firefox works the same, but also has a switch buried in the configuration settings to turn on sRGB for untagged images. Meanwhile, Safari is most likely to be a close match to Photoshop because Apple’s graphics API is closely based on Adobe’s PostScript language. Even then there are differences.

Furthermore, it’s not just browsers that are inconsistent. People are inconsistent! Consider, for example, the millions who live with color blindness. They likely already see your designs differently than you intended. As ever, test your creations in relevant browsers, check your accessibility, and don’t expect your designs to look the same everywhere!

Additionally, test on real devices so you can understand how hardware constraints (like low RAM, for example) will affect your site. Some blending modes can cause scrolling to lag. If you’re looking for that 60-frames-per-second buttery smoothness, this may affect your available choices.

Applying blending modes#section8

Blending modes can be applied with a couple different CSS properties: background-blend-mode and mix-blend-mode. A third property, isolation, can come in handy, too.

Blending background images#section9

background-blend-mode blends between the layers of a background-image declaration. This means that as background images stack on top of each other, you can apply a blending mode to mix them together.

Let’s try this to put dust and scratches on our photo. (Note that only the relevant code is shown in these examples.)


<div class="background"></div>

.background {
  background-image: url("dust-and-scratches.jpg"), url("mountain.jpg");
  background-blend-mode: screen;
}
Image showing how background-blend-mode has been used to add dust and scratches to our photo.

You can apply a different blending mode for each background-image declaration. List them in the same order as your backgrounds and separate them with commas. The final declaration—the bottom layer—is automatically given a normal blending mode, and this can’t be changed. If you are using a background-color, that will be your bottom layer.

Occasionally, you may want to make use of color overlays. Unfortunately, CSS’s background-color property limits us to a single color, and it will always be the bottom layer, whether it’s declared at the beginning of the list or at the end. A W3C recommendation proposes an image() notation that allows an author to “use a solid color as an image,” but the necessary user-agent support isn’t there yet. Luckily, because gradients are a type of image in CSS, we can trick the browser into generating a solid color by declaring two matching color-stops!

Now, let’s lighten up the image like we did before, and change it to a sepia color.


.background {
  background-image: 
  linear-gradient(hsl(26, 24%, 42%), hsl(26, 24%, 42%)),  /* sepia */
  linear-gradient(hsl(316, 22%, 37%), hsl(316, 22%, 37%)), /* lavender */
  url("dust-and-scratches.jpg"), url("mountain.jpg");

  background-blend-mode: color,   /* sepia */
  screen,  /* lavender */
  screen;  /* dust-and-scratches */
}
Our image shown in sepia.

Blending HTML elements#section10

mix-blend-mode blends between stacked HTML elements, so elements on overlapping layers will blend with those beneath it. Let’s add our title back into the image and blend away the undesirable white background with multiply. I’ve also made it slightly transparent to give it a nice overprint effect.


<div class="background">
  <div class="text-box">
    <h1>
      <img class="graphic" alt="Chamonix Harmony" src="chamonix-harmony.jpg" />
    </h1>
  </div>
</div>

.background {
  background-image: 
  linear-gradient(hsl(26, 24%, 42%), hsl(26, 24%, 42%)),  /* sepia */
  linear-gradient(hsl(316, 22%, 37%), hsl(316, 22%, 37%)), /* lavender */
  url("dust-and-scratches.jpg"), url("mountain.jpg");                     
  
  background-blend-mode: color,  /* sepia */
  screen, /* lavender */
  screen;  /* dust and scratches */
}

.graphic {
  mix-blend-mode: multiply;
  opacity: 70%;  /* overprint effect */
}
Demonstration of how we’ve used multiply to add our title back into our image and blend away the undesirable white background.

Here’s a new example using mix-blend-mode to blend multiple elements.


<div class="background">
  <div class="red-disc">
    <img alt="" src="red-disc.svg" />
  </div>
  <div class="green-disc">
    <img alt="" src="green-disc.svg" />
  </div>
  <div class="blue-disc">
    <img alt="" src="blue-disc.svg" />
  </div>
</div>

.red-disc, .green-disc, .blue-disc {
  mix-blend-mode: screen;
}

Image showing how mix-blend-mode can be used to blend multiple elements.
Using mix-blend-mode to blend multiple elements.

If you don’t want an element on a lower layer to be blended with a particular layer above it, you can separate it using a third property: isolation. This is useful for blending a few elements together without affecting the base layer. Each of these discs has their mix-blend-mode property set to screen, which causes them to create new colors where they overlap. However, we want to isolate the mountain image so that it isn’t blended along with the colors.


.background {
  isolation: isolate;
}

Image showing how the isolation property can be used to prevent an element on a lower layer from being blended with the layers above it.
Using the isolation property to prevent an element on a lower layer from being blended with the layers above it.

Keep in mind that mix-blend-mode is applied to an entire element along with all of its children. In the same way that opacity had the side effect of making the contents of containers transparent, we also see this happening with mix-blend-mode. The contents and the container are blended together.

In the following example, I’ve gone into Photoshop and mocked up a promotion for a fictitious ski equipment manufacturer I’m calling Masstif. In it, I’ve created a box to feature some copy and a logo. I’m blending the box using the color dodge mode. This gives a strong contrast to the background and allows the text and graphic to stand out better.

Image showing how the color-dodge mode can be used to make the mark stand out better from the background.

When I build this with HTML and CSS, I might expect it to work like this:


<div class="background">
  <div class="ad-contents">
    <p>When you’re on top of the world,<br/>
    the only way to go is down.</p>
    <p>Gladly.</p>
    <img alt="Masstif" src="logo.svg" />
  </div>
</div>

.background {
  background-image: url("mountain.jpg");
}
.ad-contents {
  background-color: white;
  mix-blend-mode: color-dodge;
}

But the actual result is that all of the contents are blended along with the container, as the following image shows.

Image showing how the copy and logo have blended with the container.

Just as the opacity issue can be addressed to some degree by taking advantage of background alpha channels, here too we can tackle this problem with mix-blend-mode by moving what we can into the background. Instead of creating a box and blending with mix-blend-mode, it might work by converting the box to a background-image. This won’t solve every problem, but it’s worth trying. Other than that, there’s no way to isolate child nodes from a blended element.

Browser support#section11

Blending modes are supported in most major browsers, except Internet Explorer and Edge. The silver lining is that Microsoft lists the properties as “under consideration” for Edge, and that browser does already support all of these blend modes in SVG, so one can hope for a speedy implementation. Votes for these properties on the Microsoft Edge Developer Uservoice forum would help, too.

Also, note that Safari 9 doesn’t support the hue, saturation, luminosity, and color blending modes.

Keep in mind that browsers that don’t support blending modes won’t render your designs exactly as you intended. Unless you know for sure that your audience is running sufficiently advanced browser technology, this can make things tricky. Ask yourself if fallbacks are acceptable for a portion of your audience. If not, you’ll need to find a workaround.

Despite these caveats, blending modes are a welcome addition to any designer’s tool belt. We can now add transparency, rich color, and texture processing to our designs with CSS—and we can do so losslessly and flexibly. That’s more power available directly in the browser and at our fingertips.

About the Author

Justin McDowell

Justin McDowell leads the visual design and front-end development for the Evergreen State College in Olympia, Washington. Before that, he worked for the Arbor Day Foundation and founded Ignite Lincoln, where he directed four sold-out shows. His proudest accomplishment, however, is a space-opera theme song he wrote for his corgi.

15 Reader Comments

  1. Very smooth description of the colour blending modes – I had also never thought twice about them before reading.

  2. To work around the blending issues in Figure 15, you could encapsulate .ad-contents in a wrapper, create a new child element with the white background and blending mode applied, then absolutely position this child element behind .ad-contents. See here:

    http://codepen.io/anon/pen/yeMErZ?editors=110

    Of course, this violates the principle of semantic markup, and so should be used sparingly and with care. But it accomplishes the end result.

  3. Indeed, that is one approach, John. I don’t think semantics are necessarily the problem in your example. Empty DIVs are a little weird, but there’s nothing technically wrong with them, and they don’t carry any inherent semantic value.

    However, it didn’t work the same way in Firefox as it does in Chrome, which I think does speak to the complexity of this kind of workaround. That doesn’t mean you shouldn’t try this kind of direction, just that a straightforward CSS property would be a more desirable solution.

  4. As others have noted, great explanation of blending modes and how they work. What I question is the practicality of tasking the browser with what has traditionally been Photoshop’s job to the browser in a time when people are talking about The Website Obesity Crisis.

    Can you think of a practical use for blend modes in a real-world scenario where performance matters?

  5. I think there are plenty of practical uses that don’t necessarily have to add to the download size of a web page, and I think that my article covers some of them pretty well. For example, colorization merely requires a gradient declaration, which is a pittance. Reusable texture assets can be cached and so only need to be downloaded once, instead of downloaded along with every new graphic.

    In general, though, I would make decisions that support your goals and values. Is flexibility and losslessness more important to the project, or is a super-minimal download? I’m not here to say one way or another, just to show what can be done.

  6. This is a really nice little intro to blending modes! Would have been even nicer if the examples actually applied the CSS you’re talking about in the article though. Or wouldn’t a list apart let you provide a custom .css file?

  7. We have been using blending modes in video production and digital photography for years. It’s so cool that we can use them in web development now too. Great article! Thanks.

  8. Glenruben, I’m not sure if A List Apart allows custom CSS files, though I didn’t try. (I doubt it.) Since not all browsers support these effects yet, I think it’s more important to show illustrative examples that everybody can see right away. There are already lots of live examples elsewhere around the web.

  9. Thanks for the article, very helpful.

    I ended up using CSS blending modes only once so far in a real life project. Browser support still isn’t sufficient and I have noticed significant performance issues, which this article does not cover at all.

    From my experience, you will experience noticeable performance drop when using blending modes with animation (rollovers, opacity transition, etc.) I would advise anyone to make use of this sparsely for now.

  10. mlajeunesse, I’m experiencing performance issues as well. I have some anchor text blending into a slideshow of which jQuery controls the opacity + transitions. I’ve tried enabling GPU acceleration on these elements but no luck so far…

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA