In this we are updating CSS variables from JS ..

INDEX.html 
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Playing with CSS variable & JS</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h2>Update CSS variables with <span class="h1">JS</span></h2>
    <div class="controls">
      <label for="spacing">Spacing: </label>
      <input type="range" name="spacing" id="spacing" min="10" max="200"
      value="10" data-sizing="px">
      <label for="blur">Blur:</label>
      <input type="range" name="blur" id="blur" min="0" max="30" value="10"
      data-sizing="px">
      <label for="color">Base Color:</label>
      <input type="color" name="color" id="color" value="#16CA6D" />
    </div>
    <img src="https://source.unsplash.com/collection/190727/800x400" />
    <script src="index.js"></script>
  </body>
</html>



Style.css
 

* {
  margin: 0;
  padding: 0;
}
:root {
  --color: #16CA6D;
  --spacing: 10px;
  --blur: 10px;
  
}
body{
    background-color:aliceblue
}
.h1{
    color: var(--color);
}
h2 {
  background-color:black;
  color: white;
  padding: 15px ;
  font-size: 2rem;
  text-align: center;
}
.controls {
  margin: 40px;
  text-align: center;
  
}
img{
    display: block;
    width: 50%;
    margin: auto;
    padding: var(--spacing);
    background-color: var(--color);
    filter: blur(var(--blur));

}




index.js
 

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

inputs.forEach(input => input.addEventListener('change' , handleUpDate));