//HTML <div class="custom-mouse"></div> //CSS .custom-mouse{ border: none; background-color: #fff; transform: translate(-50%, -100%); width: 20px; height: 20px; border-radius: 50%; position: absolute; top: 0; } //JS let customMouse = document.querySelector(".custom-mouse"); window.addEventListener("mousemove", function(details) { let xValue = details.clientX; let yValue = details.clientY; setTimeout(() => { customMouse.style.top = `${yValue}px`; customMouse.style.left = `${xValue}px`; }, 100); });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter