JavaScript doesn't work

[AMDphreak]

I am designing a page that uses a script tag at the end of the page to apply some visual effects. The javascript populates variables that are used in the CSS of the file. The CSS is in a separate file.

This seems like a pretty big gap in the implementation.

Your plugin's Preview:

The real page:

The color changes as I move the mouse around.

The example javascript:

    <script>
        document.addEventListener('mousemove', (e) => {
            const x = e.clientX;
            const y = e.clientY;
            document.documentElement.style.setProperty('--mouse-x', `${x}px`);
            document.documentElement.style.setProperty('--mouse-y', `${y}px`);
        });
    </script>

The example CSS using the javascript variables:

.gradient-animation {
    background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgb(255 255 255 / 0%), 75%, rgb(191 70 0 / 41%));
    mix-blend-mode: hard-light;
    pointer-events: none;
}

An example HTML, so you can test this out yourself:

    <div class="static-gradient"></div>
    <div class="gradient-animation"></div>

Add this CSS for the static-gradient:

.static-gradient {
    background:
        radial-gradient(circle at bottom, transparent, 90%, rgba(0, 0, 0, 0.5)), /* Dark region at the top */
        radial-gradient(circle, #f1f1f1, #05ab75),
        aliceblue;
}