Article posted on

Which Blend Mode? — A practical guide to using each CSS blend mode, with working examples

Blend modes, also known as blending modes or mixing modes, allow for a number of unique visual effects, handy for both UI elements and photo manipulation. This guide explains the basics behind each blend mode, and offers a number of practical examples for use in the wild.

Each blend mode in this article contains an example, like the one at the top of this page. Try dragging the white bar, clicking on the two images below, and changing the blend mode at the bottom (click on hue). You can also press the swatch button to change the source image.

I'll be releasing a complementary article to this soon, going deeper into the CSS/HTML concepts, and explaining more.

What are blend modes?

Blend modes are simply mathematical operations applied between each pixel on the backdrop layer, and its overlapping pixel on the source layer. For example, the multiply blend mode multiplies the backdrop & source colors to create the new color, as you can see with these lightness values:

This isn't the exact calculation (as that occurs in the RGB color space), but this a tidy representation of what happens.

The exact calculation
Backdrop = rgb(128, 128, 128)Source   = rgb(204, 204, 204)r = (128 * 204) / 256 = 102g = (128 * 204) / 256 = 102b = (128 * 204) / 256 = 102Result = rgb(102, 102, 102)

This multiplication will be applied to every source & backdrop pixel, until we have a result. In JavaScript, this operation could be written as a simple function:

function Blend (colorOfBackdrop, colorOfSource) {
return colorOfBackdrop * colorOfSource
}


And if we abstract this a little further, we have our mathematical function for multiply:

Blend modes in CSS

In HTML & CSS, the blend mode is applied to the source element. The backdrop is the combination of layers below the source in the current stacking context.

This is a simple way to use blend modes, and also how they're used in this article:

<div class="container">
<div class="backdrop">
<img src="car.jpg" />
</div>
<div class="source"></div>
</div>
.container {
position: relative;
}

.source {
position: absolute;
inset: 0;
background: green;
mix-blend-mode: hard-light;
}


Another way is to give the source layer a higher z-index value than the backdrop.

Blend groups

Blend modes are sorted into six different blend groups, each with their own effects.
NormalThe normal group contains only normal, the default blend mode for all elements.
DarkenDarken blend modes always darken. A white source layer has no effect.
LightenLighten blend modes always lighten. A black source layer has no effect.
ContrastContrast blend modes increase contrast. A 50% gray source layer has no effect.
InversionInversion blend modes invert colors. A black source layer has no effect.
ComponentComponent blend modes separate hue, saturation, and lightness, before computing the final value.

Normal group

The normal group contains the default blend mode.

Normal

The normal blend mode is the default for every element. The source layer is displayed.

• Normal is part of the normal group

Darken group

Darken blend modes always darken.

Multiply

The multiply blend mode multiplies the colors of the source by the backdrop. This will result in all pixels being darker than they were originally, unless white is used.

• Using black produces black
• Using white has no effect
• Multiply is similar to darken
• Multiply is the inverse of screen
• Multiply is part of the darken group

Darken

The darken blend mode chooses the darker color between the source and backdrop. This means that if a pixel on the source is lighter than the backdrop, the backdrop's pixel will still show.

• Using black produces black
• Using white has no effect
• Darken is similar to multiply
• Darken is the inverse of lighten
• Darken is part of the darken group

Color burn

The color burn blend mode darkens the backdrop to match the source. The darker the backdrop color, the more it's blended, resulting in a darker and higher contrast image.

• Using black produces black
• Using white has no effect
• Color burn is the inverse of color-dodge
• Color burn is part of the darken group

Lighten group

Lighten blend modes always lighten.

Screen

The screen blend mode inverts the source and backdrop, multiplies the colors, and inverts the result. This will result in all pixels being lighter than they were originally, unless black is used.

• Using white produces white
• Using black has no effect
• Screen is similar to lighten
• Screen is the inverse of multiply
• Screen is part of the lighten group

Lighten

The lighten blend mode chooses the lighter color between the source and backdrop. This means that if a pixel on the source is darker than the backdrop, the backdrop's pixel will still show.

• Using white produces white
• Using black has no effect
• Lighten is similar to screen
• Lighten is the inverse of darken
• Lighten is part of the lighten group

Color dodge

The color dodge blend mode lightens the backdrop to match the source. The lighter the backdrop color, the more it's blended, resulting in a lighter and higher contrast image.

• Using white produces white
• Using black has no effect
• Color dodge is the inverse of color-burn
• Color dodge is part of the lighten group

Contrast group

Contrast blend modes increase contrast.

Overlay

The overlay blend mode multiplies or screens the colors, depending on brightness, and then mixes the result into the backdrop. The result is a higher contrast image, with the backdrop modified to reflect the brightness of the source.

• Using 50% gray has no effect
• Overlay is similar to soft-light
• Overlay is the inverse of hard-light
• Overlay is part of the contrast group

Soft light

The soft light blend mode darkens or lightens the colors, depending on the color of the source. The result is similar to overlay, but less harsh—a slightly higher contrast image, with the backdrop modified to reflect the brightness of the source.

• Using 50% gray has no effect
• Soft light is similar to overlay
• Soft light is part of the contrast group

Hard light

The hard light blend mode multiplies or screens the colors, depending on brightness. The result is a much higher contrast image.

• Using black/white produces black/white
• Using 50% gray has no effect
• Hard light is the inverse of overlay
• Hard light is part of the contrast group

Inversion group

Inversion blend modes invert colors.

Difference

The difference blend mode subtracts the darker of the two colors from the lightest color. The lighter the source color, the stronger the effect, and the closer the result is to becoming a negative of the backdrop.

• Using white will invert the image
• Using black has no effect
• Difference is similar to exclusion
• Difference is part of the inversion group

Exclusion

The exclusion blend mode produces a less harsh version of difference. The lighter the source color, the stronger the effect, and the closer the result is to becoming a negative of the backdrop.

• Using 50% gray produces 50% gray
• Using black has no effect
• Exclusion is similar to difference
• Exclusion is part of the inversion group

Component group

Component blend modes separate out hue, saturation, and lightness.

Hue

The hue blend mode creates a new color by combining the hue of the source, and the saturation and luminosity of the backdrop. The result is the backdrop with the source's hue.

• Lightness and saturation don't affect hue
• Hue is similar to color
• Hue is part of the component group

Saturation

The saturation blend mode creates a new color by combining the saturation of the source, and the hue and luminosity of the backdrop. The result is the backdrop with the source's saturation.

• Hue has a small effect; some hues are more luminous than others
• All grays have the same effect
• Saturation is part of the component group

Color

The color blend mode creates a new color by combining the hue and saturation of the source, and the luminosity of the backdrop. The result is the backdrop with the source's hue and saturation.

• All grays have the same effect
• Color is similar to hue
• Color is the inverse of luminosity
• Color is part of the component group

Luminosity

The luminosity blend mode creates a new color by combining the luminosity of the source, and the hue and saturation of the backdrop. The result is the backdrop with the source's luminosity.

• Luminosity is the inverse of color
• Luminosity is part of the component group