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.

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#section2

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#section3

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.

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#section4

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.

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#section5

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#section6

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.

Color#section7

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.

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#section8

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.

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#section9

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#section10

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;
}

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 */
}

Blending HTML elements#section11

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 */
}

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;
}

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;
}

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.

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.

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#section12

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.