<div id=wrapper>

  <img src=https://bit.ly/2b189np />
  <span class=gradient></span>
  <br />

  <span id=blend1 class=blend>     
    <img src=https://bit.ly/2b189np />
    <span class=gradient></span>
  </span>

  <span id=blend2 class=blend>     
    <img src=https://bit.ly/2b189np />
    <span class=gradient></span>
  </span>

  <span id=blend3 class=blend>     
    <img src=https://bit.ly/2b189np />
    <span class=gradient></span>
  </span>

  <span id=blend4 class=blend>     
    <img src=https://bit.ly/2b189np />
    <span class=gradient></span>
  </span>

</div>

<div id=browser-support>
  <strong>Image credits:</strong>  Viktor Hanacek
  , via <a href=https://picjumbo.com >picjumbo</a>.
</div>

#blend1 * 
{
  mix-blend-mode: color;
}
#blend2 * 
{
  mix-blend-mode: overlay;
}
#blend3 * 
{
  mix-blend-mode: multiply;
}
#blend4 * 
{
  mix-blend-mode: screen;
}
.blend * 
{
  position: absolute;
}
.gradient 
{
  background-image: linear-gradient(45deg, #0FFFCB 50%, #FA023C 50%);
  background-size: 100% 50%;
}
img
,.gradient
,.blend 
{
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 6px;
}
#wrapper > * 
{
  margin: 10px;
}
#browser-support 
{
  background: ivory;
  border-left: 6px skyblue solid;
  font-family: courier new;
  font-size: 14px;
  margin: 12px 0;
  padding: 6px;
}