<main>
  <div class="wrapper">
    <article class="flow">
      <h1>Background blend mode</h1>
      <figure class="callout">
        <p>
          Toggle blending to see how these stacked images are effected by
          <code>background-blend-mode</code> to create a compostion.
        </p>
      </figure>
      <label class="toggle" for="toggle-element">
        <span class="toggle__label">Toggle blending</span>
        <input type="checkbox" role="switch" class="toggle__element" id="toggle-element" checked />
        <div class="toggle__decor" aria-hidden="true">
          <div class="toggle__thumb"></div>
        </div>
      </label>
      <div class="demo"></div>
    </article>
  </div>
</main>
.demo {
  max-width: 600px;
  height: 400px;
  position: relative;
  background: url(https://images.unsplash.com/photo-1523762491722-c02dbe5cd9aa),
    url(https://images.unsplash.com/photo-1519529028143-f767e20d651a),
    url(https://images.unsplash.com/photo-1602212096437-d0af1ce0553e);
  background-size: cover;
  background-blend-mode: overlay;
}
const toggle = document.querySelector('#toggle-element');
const demo = document.querySelector('.demo');

toggle.addEventListener('change', ({target}) => {
  demo.style.backgroundBlendMode = target.checked ? 'overlay' : 'normal';
});

External CSS

  1. https://codepen.io/web-dot-dev/pen/abpoXGZ.css

External JavaScript

This Pen doesn't use any external JavaScript resources.