<div class="box shadow"></div>
<div class="box shadow" style="--b:5px;--x: 20px;--y:0px;--s:0px"></div>
<div class="box shadow" style="--b:20px;--x: -40px;--y:40px;--s:0px"></div>
<div class="box shadow" style="--b:0px;--x: 10px;--y:10px;--s:5px"></div>

.box {
  --s: 10px; /* spread-radius */
  --x: 10px; /* X offset */
  --y: 8px;  /* Y offset */
  --b: 10px; /* blur-radius*/
  
  width: 150px;
  height: 150px;
  border: 2px solid green;
  position: relative;
}
.shadow:before {
  content:"";
  position: absolute;
  inset: calc(-1*var(--s) - 2px);
  transform: translate(var(--x),var(--y));
  clip-path: polygon(
    -100vmax -100vmax,
     100vmax -100vmax,
     100vmax 100vmax,
    -100vmax 100vmax,
    -100vmax -100vmax,
    calc(0px  + var(--s) - var(--x)) calc(0px  + var(--s) - var(--y)),
    calc(0px  + var(--s) - var(--x)) calc(100% - var(--s) - var(--y)),
    calc(100% - var(--s) - var(--x)) calc(100% - var(--s) - var(--y)),
    calc(100% - var(--s) - var(--x)) calc(0px  + var(--s) - var(--y)),
    calc(0px  + var(--s) - var(--x)) calc(0px  + var(--s) - var(--y))
  );
  filter: blur(var(--b));
  background: conic-gradient(from 90deg at 40% -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-template-columns: auto auto;
  gap: 20px;
  background: repeating-linear-gradient(-45deg, #fff 0 20px, #f9f9f9 0 40px);
}