<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