Exploring Blend Modes in CSS

Two properties allow us to blend colors together in CSS: mix-blend-mode and background-blend-mode. With mix-blend-mode, we define the blending between the element and the element(s) that are behind it. With background-blend-mode, we define the blending between the element’s background image and its background color.

The available blend mode values for both properties are the following 16:

  • color
  • color-burn
  • color-dodge
  • darken
  • difference
  • exclusion
  • hard-light
  • hue
  • lighten
  • luminosity
  • multiply
  • normal
  • overlay
  • saturation
  • screen
  • soft-light

You’ll find that the most useful blend modes for pleasing results are darken, multiply, overlay, screen and soft-light.

mix-blend-mode

Let’s use the following two images:

Foreground image Background image

Now let’s see what can be done with the mix-blend-mode property, with the 🐵 in the foreground and using a soft-light blend mode:

Foreground image Background image

Here's the markup:

<div class="blend1">
  <img src="/images/css/blend-modes/monkey.jpg" width="400" height="600">
  <img src="/images/css/blend-modes/sky.jpg" width="400" height="600">
</div>

And the applying the blend mode is as simple as it gets:

.blend1 img:first-child {
  position: absolute;
  mix-blend-mode: soft-light;
}

Try it Yourself!

See the effect of the different blend modes in action here:

Try the different blend modes

Here are the two blended images:

background-blend-mode

For our background-blend-mode example, let’s use this dark image, a background color of salmon and a blend mode of screen:

Example image for background-blend-mode 

For our blending to work, the image is used as the background for a div element:

.blend2 {
  width: 400px;
  height: 534px;
  max-width: 100%;

  background-blend-mode: screen;
  background-image: url('/images/css/blend-modes/dark.jpg');
  background-color: salmon;
  background-size: cover;
}

background-blend-mode can also blend multiple background images together. Linear and radial gradients are really background images, so an image can therefore be blending with a gradient:

Example with linear gradient 

Here we used a blend mode of overlay and some a nice light to dark purple linear gradient:

.blend3 {
  width: 400px;
  height: 600px;
  max-width: 100%;

  background-blend-mode: overlay;
  background-image:
    url('/images/css/blend-modes/parrot.jpg'),
    linear-gradient(to bottom, #efe8f5, #8845e0);
  background-size: cover;
}

Browser Support

Can I Use css-backgroundblendmode? Data on support for the css-backgroundblendmode feature across the major browsers from caniuse.com.

✖ Clear

🕵 Search Results

🔎 Searching...