<body>
<h2>Change CSS Variables with <span class="h1"> JS </span></h2>
<div class="controls">
<label for="spacing">spacing:</label>
<input id="spacing" type="range" name="spacing" min="10" max="150" value="10" data-sizing="px">

<label for="blur">Blur:</label>
<input id="blur" type="range" name="blur" min="0" max="30" value="10" data-sizing="px">

<label for="base">Base Color</label>
<input id="base" type="color" name="base" value="#2d66c2">
</div>

<img src="https://images.pexels.com/photos/1750754/pexels-photo-1750754.jpeg?cs=srgb&dl=pexels-vincent-albos-1750754.jpg&fm=jpg" alt="image">

:root {
    --base: #2d66c2;
    --spacing: 10px;
    --blur: 10px;
  }
.h1 {
    color: var(--base);
  }

 img {
     width: 500px;
     padding: var(--spacing);
     background: var(--base);
     filter: blur(var(--blur));
   }

body {
     text-align: center;
     background-color: blanchedalmond;
     color: black;
     font-family: Arial, Helvetica, sans-serif;
     font-weight: 100;
     font-size: 50px;
    }
 .controls {
     margin-bottom: 50px;
    }
 input {
     width: 100px;
    }
    

    
const inputs = document.querySelectorAll('.controls input');

 function handleChange() {
// console.log(this.value);
   const suffix = this.dataset.sizing || '';                  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
        }

// inputs.forEach(input => input.addEventListener('change', handleChange));
inputs.forEach(input => input.addEventListener('mousemove', handleChange));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.