Great idea! This seems to work:

    background: radial-gradient(circle at var(--lightx) var(--lighty), transparent 0, transparent 100px, black 110px);

It would be faster to place the gradient on an overlay and move it using CSS transform. The method above causes a recalculation of the entire gradient on every move; transform would just move the already rendered texture (in hardware on modern browsers).

Oh I see. This requires the overlay to have enough extra black space on all sides, right? Like this:

    #blackout
    {
        position: fixed; 
        z-index: 1; 
        inset: -100%;
        background: radial-gradient(circle at center, transparent 0px, transparent 100px, black 110px);
        transform: translate(var(--lightx), var(--lighty));
        pointer-events: none;
    }

    document.body.addEventListener("mousemove", function(e){
        document.documentElement.style.setProperty('--lightx', (e.clientX - (document.body.clientWidth/2)) + "px");
        document.documentElement.style.setProperty('--lighty', (e.clientY - (document.body.clientHeight/2)) + "px");
    });

This works too. I'm finding that while the dev tools are open, the transform method drops to very low fps whereas the recalculating method only loses a bit of fps. While the dev tools are closed they seem to be equal on my computer. Of course on a weaker computer there might be a bigger difference.

Thanks!