linear-gradient() values as js variables

Question

I was wondering if it would be possible to control CSS values via JS script so that I could assign variables to them (in this case extracted from clientX and clientY mouse events).

That would mean that color values would be changing as the mouse moves across the page. Has anyone had experiences of connecting scripts and variables to CSS values?

Thanks!

Answer 1

Yes. It is possible. Here is an example using X e Y to change background color.

function runEvent(e) {
    let valY = e.clientY, valX = e.clientX;

    document.body.style.backgroundColor = `rgb(${e.offsetX}, ${e.offsetY}, 0)`;
}

window.addEventListener('mousemove', runEvent);

In your case, just change backgroundColor to background = 'linearGradient(value, ${JSvalues})'