Cannot resolve '--posX' and '--posY' custom property-CodePudding

While applying CSS styles on my body element I am having the following error "Cannot resolve '--posX' custom property", below is the code

document.body.addEventListener("pointermove", (e)=> {
    const { currentTarget: el, clientX: x, clientY: y } = e;
    const { top: t, left: l, widht: w, height: h} = el.getBoundingClientRect();
    el.style.setProperty("--posX", x-1-w/2);
    el.style.setProperty("--posY", y-t-h/2);
})

body {
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  margin: 0px;
  color: #fff;
  height: 100vh;
  --x: calc(var(--posX, 0) * 1px);
  --y: calc(var(--posY, 0) * 1px);
  background-image: 
  linear-gradient(115deg, rgb(211 255 215), rgb(0 0 0)),
  radial-gradient( 90% 100% at calc(  50%   var(--x)) calc(  0%   var(--y)), rgb(200 200 200), rgb(022 000 045)),
  radial-gradient(100% 100% at calc(  80%   var(--x)) calc(  0%   var(--y)), rgb(250 255 000), rgb(036 000 000)),
  radial-gradient(150% 210% at calc( 100%   var(--x)) calc(  0%   var(--y)), rgb(020 175 125), rgb(000 200 255)),
  radial-gradient(100% 100% at calc( 100%   var(--x)) calc( 30%   var(--y)), rgb(255 077 000), rgb(000 200 255)),
  linear-gradient(60deg, rgb(255 000 000), rgb(33, 134, 93));
  background-blend-mode: overlay, overlay, difference, difference, difference, normal;
}

As you can see I'm trying to create a gradient background for my personal website, but I don't master CSS in the background, so this problem has been stopping me.

CodePudding user response：

you have typo. widht => width, you got a undefined w, so it dont work.

I have used below code, it work normally.

document.body.addEventListener("pointermove", (e)=> {
    const { currentTarget: el, clientX: x, clientY: y } = e;
    const { top: t, left: l, width: w, height: h} = el.getBoundingClientRect();
    el.style.setProperty("--posX", x-1-w/2);
    el.style.setProperty("--posY", y-t-h/2);
})