Skip to contentVisit my new website at chrisnicholas.dev
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.

Backdrop
Source mix-blend-mode: multiply
3D transform

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:

0.8
Backdrop
hsl(0, 0%, 80%)
×
0.5
Source
hsl(0, 0%, 50%)
=
0.40
Result
hsl(0, 0%, 40%)

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 = 102
g = (128 * 204) / 256 = 102
b = (128 * 204) / 256 = 102

Result = 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:

Backdrop
Source mix-blend-mode: hard-light
3D transform

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 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.
The normal group contains the default blend mode.

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

  • Normal is part of the normal group
Darken blend modes always darken.

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

Practical uses

Darken background for visible light text
white text
on snow
Result
Source
Backdrop
Overlapping elements on light backgrounds
overlap
Result
overlap
Source
Backdrop
Vignette edges with radial gradients
Result
Source
Backdrop
Saturate and darken images
Result
Source
Backdrop
3D anaglyph effect
anaglyph
anaglyph
Result
anaglyph
Source
anaglyph
Backdrop
Duotone effect (when combined with a blue screen layer)
Result
Source
Backdrop

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

Practical uses

Masking white elements on black backgrounds

masked
Result
Source

masked
Backdrop
Fade background but retain some colours
faded
Result
Source
Backdrop
Knockout text with darker background
knockout
text
Result
knockout
text
Source
Backdrop

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

Practical uses

Saturated image with higher contrast
Result
Source
Backdrop
Flip the previous example for a saturated panel with faint image
text on
panel
Result
Source
Backdrop
Lighten blend modes always lighten.

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

Practical uses

Lighten background for visible dark text
black text
on night
Result
Source
Backdrop
Overlapping elements on dark backgrounds
overlap
Result
overlap
Source
Backdrop
Saturate and lighten images
Result
Source
Backdrop
Duotone effect (when combined with a pink multiply layer)
Result
Source
Backdrop

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

Practical uses

Masking black elements on white backgrounds

masked
Result
Source

masked
Backdrop
Knockout text with lighter background
knockout
Result
knockout
Source
Backdrop

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

Practical uses

Color overlay that affects only lightest colors
Result
Source
Backdrop
Contrast blend modes increase contrast.

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

Practical uses

Black or white elements over backgrounds
superior
to opacity
Result
superior
to opacity
Source
Backdrop
Combining images
Result
Source
Backdrop
Watermark overlay
Result
Source
Backdrop

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

Practical uses

Duplicate to increase contrast
Result
Source
Backdrop
Paint on texture (or apply texture to element)
wood
Result
Source
wood
Backdrop

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

Practical uses

Highly saturated images
Result
Source
Backdrop
Harshly combining images
Result
Source
Backdrop
Looking through glass effect
Result
Source
Backdrop
Overlapping elements on non-white & non-black backgrounds
overlap
Result
overlap
Source
Backdrop
Inversion blend modes invert colors.

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

Practical uses

Inverting elements
Elements that are visible over dark and light elements
I'll always be visible, whether
I'm over black or white
Result
I'll always be visible, whether
I'm over black or white
Source
Backdrop
Negative image effect
Result
Source
Backdrop

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

Practical uses

X-ray effect
Result
Source
Backdrop
Component blend modes separate out hue, saturation, and lightness.

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

Practical uses

Set image hue without losing grays
Result
Source
Backdrop

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

Practical uses

Saturate dull images
Result
Source
Backdrop

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

Practical uses

Set image color without changing brightness
Result
Source
Backdrop
Color monochrome images
Result
Source
Backdrop
Turn images monochrome
Result
Source
Backdrop

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

Practical uses

Color matching overlays
glassy.
Result
glassy.
Source
Backdrop
Colored image effect
Result
Source
Backdrop
Sign up to my newsletter
Receive notifications when new articles are published.
Your email will only be used for sending article updates.