3 ms·
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
by eurasiantiger 5y ago
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).
- voussoir 5y 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!