CSS variables.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS variables</title>
  <style>
  	:root {
  		--bColor: #ffc600;
  		--dSize: 10px;
  		--blur: 0;
  	}
  	body {
  		text-align: center;
  		background: #193549;
  		color: white;
  		font-family: 'helvetica neue', sans-serif;
  		font-weight: 100;
  		font-size: 50px;
  	}

  	input {
  		width: 100px;
  	}
	.area {
		width: 200px;
		height: 200px;
		background: var(--bColor);
		filter: blur(var(--blur));
		padding: var(--dSize);
		margin: 100px auto;
	}

  </style>
</head>
<body>
	<div class="controls">
		<label for="dSize">Size:</label>
		<input id="dSize" type="range" name="dSize" min="10" max="200" value="10" data-sizing="px">
		
		<label for="blur">Blur:</label>
		<input id="blur" type="range" name="blur" min="0" max="25" value="0" data-sizing="px">

		<label for="bColor">Color:</label>
		<input id="bColor" type="color" name="bColor" value="#ffc600">
	</div>

	<div class="area"></div>

	<script>
		const inputs = document.querySelectorAll('.controls input');

		function handleUpdate() {
			const suffix = this.dataset.sizing ||  '';
			document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
		}

		inputs.forEach(input => input.addEventListener('change', handleUpdate));
		inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

		console.log(inputs);
	</script>
</body>
</html>