<div><img src="https://www.w3cplus.com/sites/default/files/blogs/2015/1506/css-blend-mode-1.jpg" alt="" width="200"/></div>
<div><img src="https://www.w3cplus.com/sites/default/files/blogs/2015/1506/css-blend-mode-1.jpg" alt="" width="200"/></div>
<div><img src="https://www.w3cplus.com/sites/default/files/blogs/2015/1506/css-blend-mode-1.jpg" alt="" width="200"/></div>
<div><img src="https://www.w3cplus.com/sites/default/files/blogs/2015/1506/css-blend-mode-1.jpg" alt="" width="200"/></div>
<div><img src="https://www.w3cplus.com/sites/default/files/blogs/2015/1506/css-blend-mode-1.jpg" alt="" width="200"/></div>
<div><img src="https://www.w3cplus.com/sites/default/files/blogs/2015/1506/css-blend-mode-1.jpg" alt="" width="200"/></div>
<div><img src="https://www.w3cplus.com/sites/default/files/blogs/2015/1506/css-blend-mode-1.jpg" alt="" width="200"/></div>
<div><img src="https://www.w3cplus.com/sites/default/files/blogs/2015/1506/css-blend-mode-1.jpg" alt="" width="200"/></div>
<div><img src="https://www.w3cplus.com/sites/default/files/blogs/2015/1506/css-blend-mode-1.jpg" alt="" width="200"/></div>
<div><img src="https://www.w3cplus.com/sites/default/files/blogs/2015/1506/css-blend-mode-1.jpg" alt="" width="200"/></div>
<div><img src="https://www.w3cplus.com/sites/default/files/blogs/2015/1506/css-blend-mode-1.jpg" alt="" width="200"/></div>
<div><img src="https://www.w3cplus.com/sites/default/files/blogs/2015/1506/css-blend-mode-1.jpg" alt="" width="200"/></div>
$css-blend-modes: normal, multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion;

body {
  background-color: #666;
}

div{
  margin: 5px;
  position: relative;
  display: inline-block;
  
  @for $i from 1 through length($css-blend-modes){
    &:nth-child(#{$i}) {
      img{
          border: 5px solid orange;
          box-shadow: 3px 3px 5px rgba(0,0,0,.3);
          border-radius: 5px;
          mix-blend-mode: nth($css-blend-modes, $i);
      }
      &:before {
        content: "#{nth($css-blend-modes, $i)}";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 1.5em;
        color:#fff;
        text-shadow: 1px 1px 1px rgba(0,0,0,.3);
        white-space: nowrap;
      }
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.