Blending Modes in CSS: Color Theory and Practical Application

Learn CSS: The Complete Guide

We've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced CSS.

Blending Modes

You might be familiar with “blending modes” if you’re a Photoshop user; they allow you to combine layers in different ways and they’re great fun to play with. Blending modes in CSS, however, aren’t supported universally, but they are certainly on their way.

In this tutorial, we will learn how blending modes work and the different ways you can implement blending modes using CSS.

The Basics of Blending

If you’ve never encountered blending modes, the way they work may seem a bit elusive. Let’s break it down.

What does “blending mode” actually mean?

Blending modes have been available in design software for years, but the concept of blending modes has actually been in use for much longer, even before computers were invented.

The “blending” part of blending modes refers to taking two colors and combining them in some way to make one color. More accurately, we take two pixel maps and blend them together.

How that blending takes place is the “mode” part of blending modes. How do those colors interact? Because we are working with the digital space, we can take any mathematical formula and apply it to the two inputs to derive an output.

An untreated image of a jellyfishThe same jellyfish with a solid orange layer (our “source”) placed over itHere’s our source layer with the “screen” blending mode applied

You do the Math

If you’re feeling really ambitious, take a look through the W3C FX Task Force’s official compositing document which explains the mathematical implementations of each of the different blending modes. It demonstrates a formula used to calculate the blending more.

Cm = B(Cb, Cs)

Here, Cm is the resultant color after blending.

B refers to the blending function.

The Cb variable is the background color.

And the Cs variable is the source color.

All colors are based on a 0-1 scale, which maps directly to an rgb 0-255 value.

There are two categories of blending modes. The first are considered “non-separable”, and the second (unsurprisingly) are considered “separable”. Whether a blending mode is considered separable or not is determined by the underlying algorithm. If the algorithm treats each of the separate color channels (red, green, and blue) equally, it is considered non-separable. If it uses each of the color channels individually, it is considered separable.

All blend modes may only return colors that are within the range of 0 to 255. Anything beyond this range in either direction will be clipped to the range. When you see large areas of white or black on a blended area, it is likely because those areas are being clipped.

Types of Blending Modes Available in CSS

CSS blending modes, where supported, work in two different ways. The first type of blend mode is called background-blend-mode. This property allows you to blend all of the backgrounds within one element with each other.

If you have defined, for example, multiple background images (supported in all browsers beyond IE8), the first background image will be treated as the source layer, and any image added afterwards will be treated as the background layer, lying underneath.

Adding a background color (which must be last in the list) places another layer at the bottom. The color will be treated as the background layer, and the images as the source layers. Take the following style rule, for example:

Here are two divs using these styles, one without the blending mode, the second with:

A secondary blending mode type, mix-blend-mode, allows for independent elements to be blended together. The spec is more specific about the implementation, but the blending occurs in “stacking contexts”.

This is what happens when we use mix-blend-mode, attempting to get the background image and color within the same element to blend (very little):

Note the min, mid, and max utility functions refer to the minimum, middle, and maximum values. (Mid is not the average of the three values.) The values Cred, Cgreen, and Cblue refer to red, green, and blue values present in color C.

With these definitions, we can now look at the non-separable blending modes.

Hue:

B(Cb, Cs) = SetLum(SetSat(Cs, Sat(Cb)), Lum(Cb))

This mode applies the hue of the source layer to the luminance and saturation of the background color.

Hue blend mode

Saturation:

B(Cb, Cs) = SetLum(SetSat(Cb, Sat(Cs)), Lum(Cb))

This mode does the same thing as the “hue” mode, but instead applies the saturation of the foreground to the hue and the luminance of the background.

Saturation blend mode

Color:

B(Cb, Cs) = SetLum(Cs, Lum(Cb))

Applies the hue and saturation of the foreground to the luminance of the background.

Color blend mode

Luminosity:

B(Cb, Cs) = SetLum(Cb, Lum(Cs))

This mode applies the luminosity of the source layer with the hue and saturation of the background layer.

Luminosity blend mode

Conclusion

Blend modes in CSS provide new and exciting flexibility for design and unique aesthetic experiences. Understanding the math and the color theory that applies to each of the available blending modes provides you with a more holistic toolset.