CSS-property

by hambern

CSS

@property --color {
  syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 100%, 50%);
}

body {
  background-color: var(--color);
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    var rot = document.documentElement;
    
    document.addEventListener('mousemove', function(e) {
        var hue = (e.clientX / window.innerWidth) * 360;
        var lightness = 100 - ((e.clientY / window.innerHeight) * 100);
        rot.style.setProperty('--color', `hsl(${hue}, 100%, ${lightness}%)`);
    });
});