<div class="container">
  <div class="toggle-controls"><button class="toggle-controls__button" type="button">Click to Choose Blend &amp; Color</button></div>
  <div class="controls">
    <label for="multiply"> <input type="radio" id="multiply" name="blends" value="multiply"> Multiply</label>
    <label for="overlay"> <input type="radio" id="overlay" name="blends" value="overlay"> Overlay</label> 
    <label for="screen"> <input type="radio" id="screen" name="blends" value="screen"> Screen</label>
    <label for="darken"> <input type="radio" id="darken" name="blends" value="darken"> Darken</label>
    <label for="lighten"> <input type="radio" id="lighten" name="blends" value="lighten"> Lighten</label>
    <label for="color-dodge"> <input type="radio" id="color-dodge" name="blends" value="color-dodge"> Color-Dodge</label>
    <label for="color-burn"> <input type="radio" id="color-burn" name="blends" value="color-burn"> Color-Burn</label>
    <label for="soft-light"> <input type="radio" id="soft-light" name="blends" value="soft-light"> Soft-Light</label>
    <label for="hard-light"> <input type="radio" id="hard-light" name="blends" value="hard-light"> Hard-Light</label>
    <label for="exclusion"> <input type="radio" id="exclusion" name="blends" value="exclusion"> Exclusion</label>
    <label for="difference"> <input type="radio" id="difference" name="blends" value="difference"> Difference</label>
    <label for="hue"> <input type="radio" id="hue" name="blends" value="hue"> Hue</label>
    <label for="saturation"> <input type="radio" id="saturation" name="blends" value="saturation"> Saturation</label>
    <label for="color"> <input type="radio" id="color" name="blends" value="color"> Color</label>
    <label for="luminosity"> <input type="radio" id="luminosity" name="blends" value="luminosity"> Luminosity</label>
    <label for="normal"> <input type="radio" id="normal" name="blends" value="normal"> Reset</label>
    <input type="color" class="color-picker" id="colorPicker" value="#ff0000">
* {
  box-sizing: border-box;

*:before, *:after {
  box-sizing: inherit;

html, body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;

.container {
  --blend-mode: multiply;
  --bg-color: #ff0000;
  --page-overflow: hidden;
  width: 100%;
  height: 100vh;
  overflow: var(--page-overflow);
  position: relative;
  background-color: var(--bg-color);
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/blending-image.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-blend-mode: var(--blend-mode);

.toggle-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  padding: 1em;
  background-color: rgba(0,0,0,.5);
  z-index: 2;
  .toggle-controls__button {
    --webkit-appearance: none;
    --moz-appearance: none;
    padding: 0.5em;
    background-color: transparent;
    color: white;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;

.controls {
  --left-pos: translate(-250px);
  --controls-display: hidden;
  --transparency: 0;
  position: absolute;
  top: 125px;
  left: 0;
  transform: var(--left-pos);
  opacity: var(--transparency);
  max-width: 200px;
  overflow: var(--page-overflow);
  padding: 1em;
  background-color: white;
  transition: transform 1s, opacity 1s;
  label {
    display: inline-block;
    width: 100%;
    margin-bottom: 0.5em;
    font-weight: bold;
    color: #444;
      &:last-of-type {
        text-transform: uppercase;
        border-bottom: 3px dotted #444;
        padding-bottom: 0.5em;
  .color-picker {
    border: none;
    width: 100px;
    height: 40px;
    margin-top: 0.5em;
View Compiled
//function to open and close the sidebar with the controls (with the click to choos button)
const toggleControls = (elem, container, isOpen) => {
  //if the sidebar is open these values applied to 
  //the appropriate CSS variables will close it
  if(isOpen) {
    elem.style.setProperty('--left-pos', 'translate(-250px)');
    elem.style.setProperty('--controls-display', 'hidden');
    elem.style.setProperty('--transparency', '0');
    container.style.setProperty('--page-overflow', 'hidden');
  //otherwise the sidebar is closed and this code opens it
  else {
    elem.style.setProperty('--controls-display', 'visible');
    elem.style.setProperty('--transparency', '1');
    elem.style.setProperty('--left-pos', 'translate(0)');
    container.style.setProperty('--page-overflow', 'auto');

//function to select a blend mode
const pickBlendMode = (blendMode, elem) => {
  let chosenMode;
  //if the radio button is checked, grab its value and set it
  //as value of the --blend-mode CSS variable
  if (blendMode.checked) {
    chosenMode = blendMode.value;
    elem.style.setProperty('--blend-mode', chosenMode);

//function to select background color from color picker 
//and use it to set the value of the --bg-color CSS variable 
const setBgColor = (picker, elem) => {
  let chosenColor = picker.value;
  elem.style.setProperty('--bg-color', chosenColor);

const colorPicker = document.querySelector("#colorPicker"),
  toggleButton = document.querySelector('.toggle-controls__button'),
  controlsSidebar = document.querySelector('.controls'),
  docElement = document.querySelector('.container'),
  //turn blends from node list of radio buttons into array, so you can use 
  //array methods on this variable
  blends = [].slice.call(document.getElementsByName("blends"));

//picking blend modes by looping over the radio buttons, 
//attaching click events and calling the appropriate function 
//defined above
blends.forEach((radioBtn) => {
  radioBtn.addEventListener('click', () => pickBlendMode(radioBtn, docElement));

//picking a color: attach a listener for when users change color on the 
//color picker
colorPicker.addEventListener('change', () => setBgColor(colorPicker, docElement));

//toggling controls panel on button click
toggleButton.addEventListener('click', () => {
  //retrieve the current value of the --left-pos variable
  const cssStyles = getComputedStyle(controlsSidebar);
  let cssVal = String(cssStyles.getPropertyValue('--left-pos')).trim();
  //hide or show the sidebar with the controls 
  //depending on the value of cssVal: -250px means 
  //the sidebar is closed 
  //(the parameter isOpen in the toggleControls() function is false), 
  //therefore the button click 
  //needs to open it, otherwise the button click will
  //close it
  if(cssVal === 'translate(-250px)') {
    toggleControls(controlsSidebar, docElement, false);
  } else {
      toggleControls(controlsSidebar, docElement, true);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.