CSS mix-blend-mode Property

The mix-blend-mode property defines the blending of the element's content with its direct parent background. You need to have background-image, background-color or an <img> for blending it.

In CSS, 16 blend modes are available. If a value other than “normal” (default value) is set on an element, a new stacking context will be created on that element. A newly formed group should then be blended with the stacking context, which contains the element. The element will not blend with the content which is outside of the stacking context.

Any property that causes a stacking context to be created can have an impact on blending.

You can use the isolation property for isolating an element.

Watch a video course   CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

If you want to blend an element’s background images together, you can use the background-blend-mode property.
Initial Value normal
Applies to All elements.
Inherited No.
Animatable No.
Version CSS1
DOM Syntax object.style.mixBlendMode = "exclusion";

Syntax

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity | initial | inherit;

Example of the mix-blend-mode property:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: multiply;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: multiply</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree">
    </div>
  </body>
</html>

Example of the mix-blend-mode property with the "screen" value:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: screen;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: screen</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree">
    </div>
  </body>
</html>

Example of the mix-blend-mode property with the "color-dodge" value:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: color-dodge;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: color-dodge</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree">
    </div>
  </body>
</html>

Example of the mix-blend-mode property with the "hue" value:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: hue;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: hue</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree">
    </div>
  </body>
</html>

Example of the mix-blend-mode property with the "normal" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 500px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: normal;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: normal</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300">
    </div>
  </body>
</html>

Example of the mix-blend-mode with the "hard-light" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 400px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: hard-light;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: hard-light</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300">
    </div>
  </body>
</html>

Example of the mix-blend-mode with the "difference" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 400px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: difference;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: difference</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300">
    </div>
  </body>
</html>

Values

Value Description
normal Sets the blending mode to normal. This the default value of this property.
multiply Sets the blending mode to multiply.
screen Sets the blending mode to screen.
overlay Sets the blending mode to overlay.
darken Sets the blending mode to darken.
lighten Sets the blending mode to lighten.
color-dodge Sets the blending mode to color-dodge.
color-burn Sets the blending mode to color-burn.
exclusion Sets the blending mode to exclusion.
difference Sets the blending mode to difference.
hue Sets the blending mode to hue.
saturation Sets the blending mode to saturation.
color Sets the blending mode to color.
luminosity Sets the blending mode to luminosity.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support
41.0+ 32.0+ 8.0+

Prev
Next

Related Resources

Do you find this helpful?

Related articles