/* JUST FOR THE DEMO */
@import url(http://fonts.googleapis.com/css?family=Cousine:400,700);
html,body {height: 100%;}
body {background-color: #fff; font-family: 'Cousine', monotype;}

.blend {
  display: inline-block;
  position: relative;
  margin: 30px;
  width: 30%;
  height: 200px;

  &:before {
    content: attr(data-blend);
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #fff;
    padding: 2px 4px;
  }
}

.blend[data-blend] {
  background-size: cover;
  background-position: center center;
  background-image: url('http://lorempixel.com/400/200/');
  background-color: rgba(255, 0, 0, 0.75);
}
/* END JUST FOR THE DEMO */


/* CSS fallback if background-blend-mode is supported */
.blend[data-blend="normal"] {
  background-blend-mode: normal;
}
.blend[data-blend="multiply"] {
  background-blend-mode: multiply;
}
.blend[data-blend="screen"] {
  background-blend-mode: screen;
}
.blend[data-blend="overlay"] {
  background-blend-mode: overlay;
}
.blend[data-blend="darken"] {
  background-blend-mode: darken;
}
.blend[data-blend="lighten"] {
  background-blend-mode: lighten;
}
.blend[data-blend="color-dodge"] {
  background-blend-mode: color-dodge;
}
.blend[data-blend="soft-light"] {
  background-blend-mode: soft-light;
}
.blend[data-blend="difference"] {
  background-blend-mode: difference;
}
.blend[data-blend="exclusion"] {
  background-blend-mode: exclusion;
}
.blend[data-blend="hue"] {
  background-blend-mode: hue;
}
.blend[data-blend="saturation"] {
  background-blend-mode: saturation;
}
.blend[data-blend="color"] {
  background-blend-mode: color;
}
.blend[data-blend="luminosity"] {
  background-blend-mode: luminosity;
}
/* END CSS fallback */