<div class='card'>
  <div class="card__softlight"></div>
</div>
.card {
  position:relative;
  height: 500px;
  width: 900px;
  background: grey;
}

.card__softlight {
  position: absolute;
  inset:0;
  mix-blend-mode: soft-light;
  background: radial-gradient(circle farthest-corner at var(--x, 10%) var(--y, 10%),
    rgba(255, 255, 255, 0.8) 10%,
    rgba(255, 255, 255, 0.65) 20%,
    rgba(255, 255, 255, 0) 90%);
  }
}

const card = document.querySelector(".card");

const {
  width: cardWidth,
  height: cardHeight,
  left: cardLeft,
  top: cardTop
} = card.getBoundingClientRect();

console.log(card.getBoundingClientRect())

console.log(cardWidth, cardHeight, cardLeft, cardTop);

card.addEventListener("mousemove", (e) => {
  let X = (e.clientX - cardLeft) / cardWidth;
  let Y = (e.clientY - cardTop) / cardHeight;

  let cardXPercentage = `${X * 100}%`;
  let cardYPercentage = `${Y * 100}%`;

  document.documentElement.style.setProperty("--x", cardXPercentage);
  document.documentElement.style.setProperty("--y", cardYPercentage);
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.