Advertisement
  1. Web Design
  2. Color
Webdesign

Blending Modes in CSS: Color Theory and Practical Application

by
Difficulty:BeginnerLength:MediumLanguages:

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 jellyfish
An untreated image of a jellyfish
The same jellyfish with a solid orange layer placed over it
The same jellyfish with a solid orange layer (our “source”) placed over it
Heres the orange layer with the screen blending mode applied
Here’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:

That gives us:

And we can then add blend modes into the mix:

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

Below, you can find an interactive demo for exploring the effects of a given blend mode.

Separable Blend Modes

Let’s take a look at the available blending modes, by examining the formula used, and applying each one to the red circle placed above our jellyfish.

No blend mode applied

Screen:

Screen is named after the concept of projecting multiple photo exposures at the same time on one screen. The resulting color is always at least as light as either of the blended layers.

Screen blend mode
Screen blend mode

Darken:

Selects the darker of the two colors.

Darken blend mode
Darken blend mode

Lighten:

Selects the lighter of the two colors.

Lighten blend mode
Lighten blend mode

Color dodge:

Color dodge lightens the background color to reflect the source color.

Color dodge blend mode
Color dodge blend mode

Color burn:

Color burn darkens the background color, increasing the contrast between the source and the background.

Color burn blend mode
Color burn blend mode

Hard light:

Applies “multiply” on lighter colors and “screen” on darker colors. Essentially, “hard light” is the opposite of “overlay”, which we’ll look at next.

Hard light blend mode
Hard light blend mode

Overlay:

Applies “screen” on lighter colors and “multiply” on darker colors; written as the same as “hard light”, except with the arguments to the function reversed.

Overlay blend mode
Overlay blend mode

Soft light:

This blend mode applies a variant of “multiply” on dark values and a variant of “screen” on lighter values (similar to screen).

In this algorithm, we see a secondary function D that is set in the with clause based on the blue value present in the color. The end result is typically a much softer effect than “overlay”.

Sof light blend mode
Sof light blend mode

Difference:

Difference takes the absolute difference value between the two colors, which has the effect of a photo negative.

Difference blend mode
Difference blend mode

Exclusion:

The exclusion mode has the same basic effect as the “difference” mode, except that similar colors result in a lower contrast middle value (rather than a darker value).

Exclusion blend mode
Exclusion blend mode

Non-separable Blending Modes

The “non-separable” blending modes utilize a few extra functions, including a ClipColor function, SetLum function, and Sat function. 

Important note: No version of Safari supports “hue”, “saturation”, “color”, or “luminosity” blend modes with mix-blend-mode or background-blend-mode.

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:

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

Hue blend mode
Hue blend mode

Saturation:

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
Saturation blend mode

Color:

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

Color blend mode
Color blend mode

Luminosity:

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

Luminosity blend mode
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.

What will you do as browsers continue to add support for blend modes?

Related Links

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.