Spotlight Gradient

<!-- Spotlight Gradient -->
<div class="nuda-gradient-spotlight" role="img" aria-label="Cursor-following spotlight gradient">
  <span class="nuda-gradient-spotlight__label">Move your cursor</span>
</div>

/* Spotlight Gradient — vanilla JS
   Updates CSS custom properties from the pointer position. */

(function () {
  document.querySelectorAll(".nuda-gradient-spotlight").forEach(function (el) {
    el.addEventListener("pointermove", function (e) {
      var r = el.getBoundingClientRect();
      el.style.setProperty("--gradient-spotlight-x", ((e.clientX - r.left) / r.width) * 100 + "%");
      el.style.setProperty("--gradient-spotlight-y", ((e.clientY - r.top) / r.height) * 100 + "%");
    });
  });
})();

.nuda-gradient-spotlight {
  --gradient-spotlight-x: 50%;
  --gradient-spotlight-y: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 140px;
  border-radius: 14px;
  background: #09090b;
  border: 1px solid #27272a;
  overflow: hidden;
  cursor: crosshair;
}

.nuda-gradient-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(160px circle at var(--gradient-spotlight-x) var(--gradient-spotlight-y),rgba(228,255,84,.45),transparent 60%);
  transition: background .08s linear;
}

.nuda-gradient-spotlight__label {
  position: relative;
  color: #a1a1aa;
  font: 600 14px/1 system-ui,sans-serif;
  pointer-events: none;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-gradient-spotlight::before {
    transition: none;
  }
}