<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS blend modes examples</title>
    <style>
    html {
      font-family: sans-serif;
    }

    body {
      margin: 0;
    }

    div {
      width: 280px;
      height: 130px;
      padding: 10px;
      margin: 10px;
    }

    article {
      width: 330px;
      height: 180px;
      margin: 10px;
      position: relative;

    }

    body > div, article div:first-child {
      background: url(colorful-heart.png) no-repeat center 20px;
      background-color: green;
    }

    body > div, article {
      display: inline-block;
    }

    article div:first-child {
      position: absolute;
      top: 10px;
      left: 0;
    }

    article div:last-child {
      background-color: purple;
      position: absolute;
      bottom: -10px;
      right: 0;
      z-index: -1;
    }


    .multiply {
      background-blend-mode: multiply;
    }

    .multiply-mix {
      mix-blend-mode: multiply;
    }

    .screen {
      background-blend-mode: screen;
    }

    .screen-mix {
      mix-blend-mode: screen;
    }

    .overlay {
      background-blend-mode: overlay;
    }

    .overlay-mix {
      mix-blend-mode: overlay;
    }

    .darken {
      background-blend-mode: darken;
    }

    .darken-mix {
      mix-blend-mode: darken;
    }

    .lighten {
      background-blend-mode: lighten;
    }

    .lighten-mix {
      mix-blend-mode: lighten;
    }

    .color-dodge {
      background-blend-mode: color-dodge;
    }

    .color-dodge-mix {
      mix-blend-mode: color-dodge;
    }

    .color-burn {
      background-blend-mode: color-burn;
    }

    .color-burn-mix {
      mix-blend-mode: color-burn;
    }

    .hard-light {
      background-blend-mode: hard-light;
    }

    .hard-light-mix {
      mix-blend-mode: hard-light;
    }

    .soft-light {
      background-blend-mode: soft-light;
    }

    .soft-light-mix {
      mix-blend-mode: soft-light;
    }

    .difference {
      background-blend-mode: difference;
    }

    .difference-mix {
      mix-blend-mode: difference;
    }

    .hue {
      background-blend-mode: hue;
    }

    .hue-mix {
      mix-blend-mode: hue;
    }



    </style>
  </head>
  <body>
  <h2>Background blend modes</h2>

    <div>
      No blend mode
    </div>

    <div class="multiply">
      Multiply
    </div>

    <div class="screen">
      Screen
    </div>

    <div class="overlay">
      Overlay
    </div>

    <div class="color-dodge">
      Color-dodge
    </div>

    <div class="color-burn">
      Color-burn
    </div>

    <div class="hard-light">
      Hard-light
    </div>

    <div class="soft-light">
      Soft-light
    </div>

    <div class="difference">
      Difference
    </div>

    <div class="hue">
      Hue
    </div>

    <h2>Mix blend modes</h2>

    <article>
      No mix blend mode
      <div>

      </div>
      <div>
      </div>
    </article>

    <article>
      Multiply mix
      <div class="multiply-mix">

      </div>
      <div>
      </div>
    </article>

    <article>
      Screen mix
      <div class="screen-mix">

      </div>
      <div>
      </div>
    </article>

    <article>
      Overlay mix
      <div class="overlay-mix">

      </div>
      <div>
      </div>
    </article>

    <article>
      Color-dodge mix
      <div class="color-dodge-mix">

      </div>
      <div>
      </div>
    </article>

    <article>
      Color-burn mix
      <div class="color-burn-mix">

      </div>
      <div>
      </div>
    </article>

    <article>
      Hard-light mix
      <div class="hard-light-mix">

      </div>
      <div>
      </div>
    </article>

    <article>
      Soft-light mix
      <div class="soft-light-mix">

      </div>
      <div>
      </div>
    </article>

    <article>
      Difference mix
      <div class="difference-mix">

      </div>
      <div>
      </div>
    </article>

    <article>
      Hue mix
      <div class="hue-mix">

      </div>
      <div>
      </div>
    </article>
  </body>
</html>
