Lesson 30: Blend Modes

Duotone is a popular color treatment for photos. It makes an image look like it’s made up of only two contrasting colors. One color is for the bright parts, and the other is for the dark parts. How do you do this with CSS?

You can apply this effect to any image with blend modes. You also use other techniques you’ve learned about, like filters and pseudo-elements.

What is a blend mode?#

Blend modes are common in design tools like Photoshop. They create an effect by mixing the colors from two or more layers. When you change how the colors mix, you can get really interesting visual effects. You can also use a blend mode as a tool. For example, you can isolate an image that has a white background so it looks like it has a see-through background.

You can use most of the blend modes from a design tool in CSS. You do this with the mix-blend-mode property or the background-blend-mode property. The mix-blend-mode property blends a whole element. The background-blend-mode property blends the background of an element.

You use background-blend-mode when an element has more than one background and you want them all to blend into each other.

The mix-blend-mode property affects the whole element, including its pseudo-elements. The duotone image from the start is a good example. It has color layers applied to the element through its pseudo-elements.

Blend modes fall into two groups, separable and non-separable. A separable blend mode looks at each color part, such as red, green, and blue, on its own. A non-separable blend mode looks at all the color parts together.

Separable blend modes#

Normal#

This is the default blend mode. It changes nothing about how an element blends with others.

Multiply#

The multiply blend mode is like stacking see-through sheets on top of each other. White pixels look see-through, and black pixels look black. Anything in between multiplies its light values. This means light parts get much lighter and dark parts get darker. Most often you get a darker result.

.my-element {
  mix-blend-mode: multiply;
}

Screen#

The screen blend mode multiplies the light values. This is the opposite of multiply, and most often you get a brighter result.

.my-element {
  mix-blend-mode: screen;
}

Overlay#

The overlay blend mode combines multiply and screen. Dark base colors become darker and light base colors become lighter. Mid-range colors, like a 50% gray, are not affected.

.my-element {
  mix-blend-mode: overlay;
}

Darken#

The darken blend mode compares the dark colors of the top image and the bottom image and picks the darkest of the two. It does this by comparing rgb values for each color channel, not light values like multiply and screen do. With darken and lighten, this comparison often creates new color values.

.my-element {
  mix-blend-mode: darken;
}

Lighten#

The lighten blend mode does the exact opposite of darken.

.my-element {
  mix-blend-mode: lighten;
}

Color dodge#

The color-dodge blend mode lightens the background color to show the top color. Pure black colors see no effect from this mode.

.my-element {
  mix-blend-mode: color-dodge;
}

Color burn#

The color-burn blend mode is a lot like the multiply blend mode. It adds more contrast, so you get more colorful mid-tones and fewer bright spots.

.my-element {
  mix-blend-mode: color-burn;
}

Hard light#

The hard-light blend mode creates a strong contrast. This blend mode either screens or multiplies light values. If the pixel is lighter than 50% gray, the image is lightened, as if it were screened. If it’s darker, it’s multiplied.

.my-element {
  mix-blend-mode: hard-light;
}

Soft light#

The soft-light blend mode is a gentler version of overlay. It works in much the same way, but with less contrast.

.my-element {
  mix-blend-mode: soft-light;
}

Difference#

A good way to picture how difference works is to think of a photo negative. The difference blend mode takes the difference between each pair of pixels and inverts light colors. If the two color values are the same, they become black. Where the values differ, the result inverts.

.my-element {
  mix-blend-mode: difference;
}

Exclusion#

The exclusion blend mode is a lot like difference. But instead of returning black for pixels that match, it returns 50% gray. This gives you a softer result with less contrast.

.my-element {
  mix-blend-mode: exclusion;
}

Non-separable blend modes#

You can think of these blend modes like HSL color parts. Each one takes a certain part from the top layer and mixes it with the other parts.

Hue#

The hue blend mode takes the hue of the top color and applies it to the saturation and light of the bottom color.

.my-element {
  mix-blend-mode: hue;
}

Saturation#

The saturation blend mode works like hue. It applies the saturation of the top color to the hue and light of the bottom color.

.my-element {
  mix-blend-mode: saturation;
}

Color#

The color blend mode makes a color from the hue and saturation of the top color and the light of the bottom color.

.my-element {
  mix-blend-mode: color;
}

Luminosity#

The luminosity blend mode is the opposite of color. It makes a color with the light of the top color and the hue and saturation of the bottom color.

.my-element {
  mix-blend-mode: luminosity;
}

The isolation property#

You can set the isolation property to a value of isolate. This creates a new stacking context, which stops the element from blending with the layer behind it. As you learned in the z-index module, a new stacking context makes that layer the base layer. This means blend modes from a parent will no longer apply. But elements inside an element with isolation: isolate set can still blend.

[!NOTE] This doesn’t work with background-blend-mode because the background is already isolated.

Adapted from Learn CSS © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).