<section>
  <div class="foo"></div>
</section>

section {
  display: flex;
  gap: 30px;
  padding: 30px;
}

.foo {
  --shadow-colors: rgba(16, 22, 26, 0.3) rgba(16, 22, 26, 0.1)
    rgba(16, 22, 26, 0.5);
  --shadow-area-width: 15;
  --shadow-rectangle-fill: #efefef;
  box-sizing: border-box;
  background-color: #fff;
  background-image: paint(shadow, 0 0 0, 8 2 1, 8 5 3);
  padding: 15px;
  height: 300px;
  transition: --shadow-colors 0.5s;
  width: 300px;

  &:hover {
    --shadow-colors: rgba(16, 22, 26, 0.7) rgba(16, 22, 26, 0.5)
      rgba(16, 22, 26, 0.5);
  }
}

CSS.paintWorklet.addModule("https://codepen.io/steve_fulghum/pen/vYXEJom.js");

CSS.registerProperty({
  name: "--device-pixel-ratio",
  syntax: "<number>",
  initialValue: window.devicePixelRatio,
  inherits: true
});

CSS.registerProperty({
  name: "--shadow-colors",
  syntax: "<color>+",
  initialValue: "black",
  inherits: false
});

CSS.registerProperty({
  name: "--shadow-area-width",
  syntax: "<integer>",
  initialValue: "0",
  inherits: false
});

CSS.registerProperty({
  name: "--shadow-rectangle-fill",
  syntax: "<color>",
  initialValue: "#fff",
  inherits: false
});