<header>
  <h1>Playing with CSS Blend Modes!</h1>
  <h2>Click on an option below</h2>
</header>

<main>
  <div id="wrapper">
    <div class="circle blend-mode-color-dodge"></div>
    <div class="circle blend-mode-color-dodge"></div>
    <div class="circle blend-mode-color-dodge"></div>
    <div class="circle blend-mode-color-dodge"></div>
    <div class="circle blend-mode-color-dodge"></div>
  </div>
  
  <div id="spacer"></div>

  <div id="buttons">
    <button id="background">Toggle Background</button>
    <button id="initial">Initial</button>
    <button id="inherit">Inherit</button>
    <button id="unset">Unset</button>
    <button id="multiply">Multiply</button>
    <button id="screen">Screen</button>
    <button id="overlay">Overlay</button>
    <button id="darken">Darken</button>
    <button id="lighten">Lighten</button>
    <button id="color-dodge">Color Dodge</button>
    <button id="color-burn">Color Burn</button>
    <button id="hard-light">Hard Light</button>
    <button id="soft-light">Soft Light</button>
    <button id="difference">Difference</button>
    <button id="exclusion">Exclusion</button>
    <button id="hue">Hue</button>
    <button id="saturation">Saturation</button>
    <button id="color">Color</button>
    <button id="luminosity">Luminosity</button>
  </div>
</main>
/* ---------------------------------- 
*
*  Blend Modes
* 
* --------------------------------- */
.blend-mode- {
  &normal { mix-blend-mode: normal; }
  &multiply { mix-blend-mode: multiply; }
  &screen { mix-blend-mode: screen; }
  &overlay { mix-blend-mode: overlay; }
  &darken { mix-blend-mode: darken; }
  &lighten { mix-blend-mode: lighten; }
  &color-dodge { mix-blend-mode: color-dodge; }
  &color-burn { mix-blend-mode: color-burn; }
  &hard-light { mix-blend-mode: hard-light; }
  &soft-light { mix-blend-mode: soft-light; }
  &difference { mix-blend-mode: difference; }
  &exclusion { mix-blend-mode: exclusion; }
  &hue { mix-blend-mode: hue; }
  &saturation { mix-blend-mode: saturation; }
  &color { mix-blend-mode: color; }
  &luminosity { mix-blend-mode: luminosity; }
  &initial { mix-blend-mode: initial; }
  &unset { mix-blend-mode: unset; }
}


/* ---------------------------------- 
*
*  General Styling
* 
* --------------------------------- */
body {
  background-color: #222;
  color: #fff;
}

.checked {
  background-color: #fff;
  color: #171717;
}

// --- Header --- //
header {
  text-align: center;
  font-family: 'Amatic SC', cursive;
  margin: 50px 0 75px;
  
  h1 {
    font-size: 5em;
  }
  h2 {
    font-size: 2.5em;
  }
}

// --- Circles --- //
$diameter: 175px;
$radius: $diameter/2;

#wrapper {
  width: $diameter * 5;
  margin: 0 auto;
}

.circle {
  box-sizing: border-box;
  height: $diameter;
  width: $diameter;
  border-radius: 50%;
  position: relative;
  float: left;
    
    &:nth-child(1){
      background-color: rebeccapurple;
      left: $diameter;
      }
    &:nth-child(2){
      background-color: #DB3939;
      left: $radius;
      }
    &:nth-child(3){
      background-color: #F7F260;
      }
    &:nth-child(4){
      background-color: #348534;
      right: $radius;
      }
    &:nth-child(5){
      background-color: #3962DB;
      right: $diameter;
      }
}

// --- Buttons --- ///
#buttons {
  width: 75%;
  margin: 50px auto;
  text-align: center;
  
  button {
    margin: 3px 0;
  }
  
  #background {
    width: 100%;
  }
}

// --- Footer --- //
footer {
  position: absolute;
  bottom: 0;
  background-color: #222;
  color: #fff;
  width: 100%;
  padding: 50px;
  text-align: center;
  font-family: sans-serif;
  
  a {
    color: inherit;
  }
}

// --- Hacky Spacer (sorry...) --- //
#spacer {
  height: 250px;
}
View Compiled 
// --- Change Blend Modes --- //
$('#initial').click(function() {
  $('.circle').attr('class', 'circle blend-mode-initial');
});

$('#inherit').click(function() {
  $('.circle').attr('class', 'circle blend-mode-inherit');
});

$('#unset').click(function() {
  $('.circle').attr('class', 'circle blend-mode-unset');
});

$('#multiply').click(function() {
  $('.circle').attr('class', 'circle blend-mode-multiply');
});

$('#screen').click(function() {
  $('.circle').attr('class', 'circle blend-mode-screen');
});

$('#overlay').click(function() {
  $('.circle').attr('class', 'circle blend-mode-overlay');
});

$('#darken').click(function() {
  $('.circle').attr('class', 'circle blend-mode-darken');
});

$('#lighten').click(function() {
  $('.circle').attr('class', 'circle blend-mode-lighten');
});

$('#color-dodge').click(function() {
  $('.circle').attr('class', 'circle blend-mode-color-dodge');
});

$('#color-burn').click(function() {
  $('.circle').attr('class', 'circle blend-mode-color-burn');
});

$('#hard-light').click(function() {
  $('.circle').attr('class', 'circle blend-mode-hard-light');
});

$('#soft-light').click(function() {
  $('.circle').attr('class', 'circle blend-mode-soft-light');
});

$('#difference').click(function() {
  $('.circle').attr('class', 'circle blend-mode-difference');
});

$('#exclusion').click(function() {
  $('.circle').attr('class', 'circle blend-mode-exclusion');
});

$('#hue').click(function() {
  $('.circle').attr('class', 'circle blend-mode-hue');
});

$('#saturation').click(function() {
  $('.circle').attr('class', 'circle blend-mode-saturation');
});

$('#color').click(function() {
  $('.circle').attr('class', 'circle blend-mode-color');
});

// --- Toggle Background --- //
$('#background').click(function() {
  if ($('body').hasClass('checked')) {
      $('body').removeClass('checked');
    } else {
      $('body').addClass('checked');
    }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js