<div class="earth"></div>

<select class="selector">
  <option>normal</option>
  <option>multiply</option>
  <option>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

body{
  background-color:#212121;
  text-align:center;
}

.selector{
  cursor:pointer;
  background-color:transparent;
  border:0;
  color:#ffeb3b;
  font:400 30px 'Indie Flower', cursive;
}

.earth{
  background-color:#ffeb3b;
  background-image:url('http://www.lorempixel.com/300/300/people');
  border:5px solid #ffeb3b;
  border-radius:100%;
  width:300px;
  height:300px;
  margin:20px auto;
}

/* multiply,screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. And also normal */
$('select.selector').on('change', function() {
  $('div.earth').css('background-blend-mode',this.value);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js