<div class="box">Hover me</div>
<div class="box">Hover me</div>
<div class="box">Hover me</div>
<div class="box">Hover me</div>
<div class="box">Hover me</div>
<div class="box">Hover me</div>
<div class="box">Hover me</div>
<div class="box">Hover me</div>
<div class="box">Hover me</div>
<div class="box">Hover me</div>
<div class="box">Hover me</div>
<div class="box">Hover me</div>
<div class="box">Hover me</div>
<div class="box">Hover me</div>
<div class="box">Hover me</div>
<div class="box">Hover me</div>

<div class="overlay">
  <div class="shadowbox"></div>
  <div class="shadowbox"></div>
  <div class="shadowbox"></div>
  <div class="shadowbox"></div>
  <div class="shadowbox"></div>
  <div class="shadowbox"></div>
  <div class="shadowbox"></div>
  <div class="shadowbox"></div>
  <div class="shadowbox"></div>
  <div class="shadowbox"></div>
  <div class="shadowbox"></div>
  <div class="shadowbox"></div>
  <div class="shadowbox"></div>
  <div class="shadowbox"></div>
  <div class="shadowbox"></div>
  <div class="shadowbox"></div>
</div>

:root {
  --border-radius: 10px;
  --grid-template: repeat(4, 1fr) / repeat(4, 1fr);
  --gap: 20px;
  --x: -300px;
  --y: -300px;
}

body {
  margin: 0;
  box-sizing: border-box;
  padding: var(--gap);
  display: grid;
  grid-template: var(--grid-template);
  gap: var(--gap);
  height: 100vh;
  height: 100dvh;
  background-color: rgba(24, 24, 24, 1);
  font-family: tahoma;
  font-size: calc(0.8vh + 0.8vw);
  color: grey;
  position: relative;
  text-align: center;
}

.box {
  background-color: black;
  border-radius: var(--border-radius);
  box-sizing: border-box;
  border: 1px solid #262626;
  background-color: rgba(14, 14, 14, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  cursor: default;
  transition: 0.2s all;
}

.box:hover {
  background-color: rgba(18, 18, 18, 1);
}

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  grid-template: var(--grid-template);
  gap: var(--gap);
  padding: var(--gap);
  user-select: none;
  mask: radial-gradient(
    320px 320px at var(--x) var(--y),
    black 1%,
    transparent 40%
  );
  will-change: mask;
}

.shadowbox {
  border-radius: var(--border-radius);
  box-sizing: border-box;
  border: 1px solid #2d68ff;
}

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

document.querySelector("body").addEventListener("mousemove", function (event) {
  const x = event.clientX;
  const y = event.clientY;
  body.style.cssText = `--x:${x}px; --y:${y}px`;
});