<div class="blend"></div>
//Blend mode gradients --------------------------
 $cool-grad: linear-gradient(aqua, royalblue);
 $meh-grad: linear-gradient(tomato, transparent);
 $snarky-grad: linear-gradient(orange 75%, blue);

@mixin blendy($img, $color: null, $grad: null, $blend: multiply) {
  $img-path: url('#{$img}');
  @if $grad {
    background: $grad, $img-path;
  } @else {
    background-image: $img-path;
    background-color: $color;
  }
  background-blend-mode: $blend;
}

.blend {
  @include blendy("http://sassbreak.com/assets/mountains.jpg", $grad: $cool-grad);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-size: cover;
  margin: 1.5em auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.