JSFiddle - React, Tailwind, and code Playground

by Arjan Haverkamp

HTML

<input type="color" id="colorPicker">
<div class="overlay">

CSS

html, body {
  height: 100%;
}
body {
  background: url(https://images.pexels.com/photos/163822/color-umbrella-red-yellow-163822.jpeg)
}
.overlay {
  mix-blend-mode: multiply;
  background: var(--blend-color, #ff6b6b);
  transition: background 0.3s;
  position: fixed;
  inset: 5em;
}

JavaScript

const picker = document.getElementById('colorPicker');
const overlay = document.querySelector('.overlay');

picker.oninput = () => {
  console.log('input')
  overlay.style.setProperty('--blend-color', picker.value);
};