<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';
});
This Pen doesn't use any external JavaScript resources.