.card {
  width: 200px;
  height: 300px;
  position: relative;
  overflow: hidden;
  border: 1px solid #333;
  border-radius: 8px;
  background-color: #222;
}
.bg {
  --box-w: 400px;
  --box-h: 400px;
  width: var(--box-w);
  height: var(--box-h);
  border-radius: 50%;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -30%);
  overflow: hidden;
  box-shadow: 0 0 50px rgba(255, 255, 255, 0.65);
}
.bg::before {
  content: "";
  width: var(--box-w);
  height: var(--box-h);
  border-radius: 50%;
  position: relative;
  background-image: radial-gradient(
    closest-side at 50% 50%,
    #222 70%,
    #63639f 78%,
    #d98dd9 85%,
    #d98dd9 90%,
    #fbfbfb 98%,
    #fbfbfb
  );
  position: absolute;
  inset: 0;
}
.bg::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  backdrop-filter: blur(8px);
  position: absolute;
  inset: 0;
}