CSS mix-blend-mode Property

❮ Prev Next ❯

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.

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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.