如何创建一个div，它的渐变会根据光标的位置变化？

<div id="gradientDiv"></div>

#gradientDiv {
  width: 300px;
  height: 200px;
  background: linear-gradient(to right, red, blue);
}

var gradientDiv = document.getElementById("gradientDiv");

gradientDiv.addEventListener("mousemove", function(event) {
  var x = event.clientX / window.innerWidth;
  var y = event.clientY / window.innerHeight;
  
  gradientDiv.style.background = "linear-gradient(to right, red, blue, green, yellow, purple, orange)";
  gradientDiv.style.backgroundPosition = (x * 100) + "% " + (y * 100) + "%";
});