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.

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

<!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>

In the following example the mix-blend-mode is set to "screen":

Example

<!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>

Here the "color-dodge" value is specified:

Example

<!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>

Another example with "hue" value:

Example

<!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>

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.


Prev
Next

Related articles