.demo(style="background-color: hsl(180,100%,30%); color: hsl(180,100%,30%)")
  input.inp-range(type="range", min="0",max="360")
View Compiled
$width: 700;
$height: 504;

BODY {
  padding-top: 1em;
  text-align: center;
  }

.demo {
  display: inline-block;
  position: relative;
  width: #{$width}px;
  height: #{$height}px;
  
  background-image:  url(http://placekitten.com/#{$width}/#{$height});
  background-blend-mode: hard-light;
  box-shadow: 0 0 10px rgba(0,0,0,.7);
  &:before {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    left: -20px;
    bottom: -20px;
    right: 50px;
    top: 50px;
    background: currentColor;
    }
  }

.list--modes {
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(255,255,255,.5);
  font: 14px/1.65 Arial, sans-serif;
  color: #000;
  }
  .mode {
    position: relative;
    padding: .305em 1em;
    box-shadow: 0 -1px 0 rgba(255,255,255,.5);
    cursor: pointer;
    transition: background-color .2s;
    
    &:before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      border-width: 0;
      border-color: transparent;
      transition: all .1s;
      }
    
    &:hover,
    &--current {
      background: rgba(255,255,255,.5);
      }
    &:hover + &--current {
      box-shadow: 0 -1px 0 rgba(255,255,255,.5);
      }
    &--current:before {
      top: 0;
      bottom: 0;
      left: -.55em;
      height: 0;
      width: 0;
      margin: auto;
      border: .6em solid transparent;
      border-left: 0;
      border-color: transparent rgba(255,255,255,.75) transparent;
      }
    }

.inp-range {
  position: absolute;
  left: 0;
  right: 0;
  width: 50%;
  margin: auto;
  bottom: 2em;
  }
View Compiled
var doc = document;
var modePrefix = "mode";
var modeCurrent = modePrefix + "--current";

var modeDefault = "hard-light";

var modes = ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];

var demo = doc.querySelector(".demo");
var elemList = doc.createElement( "ul" );  
elemList.classList.add( "list--modes" );
var listModes = demo.appendChild( elemList );

function changeMode(elem){
    var currentMode = elem.getAttribute("data-mode");
    demo.style.backgroundBlendMode = currentMode;
    
    var currentElem = doc.querySelector("." + modeCurrent);
    currentElem.classList.remove(modeCurrent);
  
    elem.classList.add( modeCurrent);
}

for (var i = 0; i < modes.length; i++){
  var elemLi = doc.createElement( "li" );  
  elemLi.classList.add( modePrefix, modePrefix + "--" + modes[i] );
  
  if (modes[i] == modeDefault) {
    elemLi.classList.add( modeCurrent);
    }
  
  elemLi.setAttribute( "data-mode", modes[i] );
  elemLi.innerHTML = modes[i];
  var listItem = listModes.appendChild( elemLi );
  
  listItem.onclick = function(){
   changeMode(this);
  }
}

var rangeColor = doc.querySelector(".inp-range");

function changeColor(elem){
 var val = elem.value;
 var newColor = "hsl(" + val +",100%,30%)";
 demo.style.color = newColor; 
 demo.style.backgroundColor = newColor; 
}

rangeColor.onmousemove = function(){
 changeColor(this);
}
rangeColor.onchange = function(){
 changeColor(this);
}

document.onkeyup = function(event) {
    
    if(event.keyCode == 38){
      var currentElem = doc.querySelector("." + modeCurrent);
      var prev = currentElem.previousSibling;
      changeMode(prev);
    }
    else if(event.keyCode == 40){
      var currentElem = doc.querySelector("." + modeCurrent);
      var next = currentElem.nextSibling;
      changeMode(next);
    }
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.