<div class="card">Gradient Shadow with filter</div>

<div class="form">
  <label for="start">Start Color:</label>
  <input type="color" value="#7f00ff" id="start" name="color" />
  <label for="stop">Stop Color:</label>
  <input type="color" value="#e100ff" id="stop" name="color">
  <label for="deg">Deg:</label>
  <input type="range" id="deg" name="deg" min="0" max="360" value="45">
  <label for="blur">Blur:</label>
  <input type="range" id="blur" name="blur" min="20" max="50" value="30">
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: rgb(237 242 247);
  padding: 20px;

  display: grid;
  place-content: center;
}

.card {
  aspect-ratio: 16 / 9;
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(20px, 3vw + 2rem, 30px);
  color: #fff;
}

:root {
  --start: #7f00ff;
  --stop: #e100ff;
  --deg: 45;
  --blur: 30;
}

.card {
  background-image: linear-gradient(
    calc(var(--deg) * 1deg),
    var(--start),
    var(--stop)
  );
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  z-index: -1;
  transform: translateY(15%) scale(0.85);
  filter: blur(calc(var(--blur) * 1px));
}

.form {
  margin-top: 2rem;
}

const rootEle = document.documentElement;
const colors = document.querySelectorAll('input[type="color"]');
const ranges = document.querySelectorAll('input[type="range"]');

colors.forEach((color) => {
  color.addEventListener("change", (etv) => {
    rootEle.style.setProperty(`--${etv.target.id}`, etv.target.value);
  });
});

ranges.forEach((range) => {
  range.addEventListener("change", (etv) => {
    rootEle.style.setProperty(`--${etv.target.id}`, etv.target.value);
  });
});