How to draw a background-image with multiple radial-gradient or linear-gradient?

I want to create a background-image with a gradient effect like below, how can I implement it?

And here is what I'm trying to do, and abviously I failed.

  background: 
  radial-gradient(circle at 50% 0%,#060319 30%,#110844 ,#7226aa ,#fcb6f7 40%,transparent 50%),
  radial-gradient(circle at 50% 100%,#060319 30%,#110844 ,#7226aa ,#fcb6f7 40%,transparent 50%);
  

body,
html,
* {
  margin: 0;
  padding: 0;
}
/* prettier-ignore */
body {

  height: 100vh;
  color: #fff;
  background: 
  radial-gradient(circle at 50% 0%,#060319 30%,#110844 ,#7226aa ,#fcb6f7 40%,transparent 50%),
  radial-gradient(circle at 50% 100%,#060319 30%,#110844 ,#7226aa ,#fcb6f7 40%,transparent 50%);
  

  background-color: #fcb6f7;
}

.text-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid red;

  height: 100vh;
}

(codepen)

The closest i can get, change the gradient to

background: 
  radial-gradient(circle closest-corner at 50% 0%, rgba(6 3 25 / 1) 105%, rgba(114 38 170 / 1) 130%, transparent 200%), 
  radial-gradient(circle closest-corner at 50% 100%, rgba(6 3 25 / 1) 105%, rgba(114 38 170 / 1) 130%, transparent 200%);

You can use Hex, I changed it to RGBA for experiment. But you really need to have a vertical container to the effect to show correctly, else it will combine and look weird.