4 ms·
Great idea! This seems to work: background: radial-gradient(circle at var(--lightx) var(--lighty), transparent 0, transparent 100px, black 110px);
by voussoir 4y ago
Great idea! This seems to work:
background: radial-gradient(circle at var(--lightx) var(--lighty), transparent 0, transparent 100px, black 110px);
- eurasiantiger 4y agoIt 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).
- voussoir 4y agoOh 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!