Css create a circular gradient with blur

Question

How can I create a CSS gradient like the one found in the speaker hompod?

Can you give me some advice?

.div {
    background: linear-gradient(217deg, #16446c, rgba(255, 0, 0, 0) 70.71%), linear-gradient(127deg, #006867, rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, #62265d, rgba(0, 0, 255, 0) 70.71%);
    border-radius: 50%;
    font-size: 250px;
    height: 1em;
    width: 1em;
    filter: blur(2px);
}

<div class='div'></div>

Edit:

.div {
    background: conic-gradient(from 180deg at 50% 50%, #00FFC2 0deg, #00F0FF 120.07deg, #0077FF 179.52deg, #FF0099 241.65deg, #0470E5 299.6deg, #00FFC2 360deg);
    border-radius: 50%;
    font-size: 250px;
    height: 1em;
    width: 1em;
    filter: blur(32px);
}

<div class='div'></div>

Answer 1

I think your work is pretty close visually compare to the original image. Since you did not mention what is missing from your homepod recreation, I just try my best to mimic the image. You may change the color choice and the arc angle for better result. My approach is to divide the orb into pies. Each pie has a distinct color. Since the image is blurry and my naked eye just cannot tell how many solid color are there. I roughly pick 4 from it.

The center of the orb seems brighter so I apply radial-gradient to the pie. I set the center to be white and at the 50% of the gradient its distinct color begin. This is the image before the blur applied.

This is the final result

.background {
  width: 400px;
  height: 400px;
  background-color: black;
  padding: 80px;
  position: relative;
}

.background .pie {
  width: 30%;
  height: 30%;
  background: white;
  border-top-left-radius: 100%;
  position: absolute;
  transform-origin: bottom right;
  filter: blur(40px);
}

.background .pie.wineberry {
  transform: rotate(81deg);
  background: radial-gradient(circle at bottom right, white, #663a6d 40%);
}

.background .pie.cello {
  transform: rotate(116deg);
  background: radial-gradient(circle at bottom right, white, #24425e 40%);
}

.background .pie.greenpea {
  transform: rotate(202deg);
  background: radial-gradient(circle at bottom right, white, #18665c 40%);
}

.background .pie.greenpea2 {
  transform: rotate(287deg);
}

.background .pie.astronaut {
  transform: rotate(13deg);
  background: radial-gradient(circle at bottom right, white, #345a7f 40%);
}

<div class="background">
  <div class="pie astronaut"> </div>
  <div class="pie greenpea"> </div>
  <div class="pie greenpea greenpea2"> </div>
  <div class="pie cello"> </div>
  <div class="pie wineberry"> </div>
</div>

---

Edit on 8-Apr-2022

Since @Paul prefer a single element solution. I update the answer. Thanks @cloned for his conic gradients idea.

The final result achieve by 2 gradient background. First the radial-gradient mimic the center brighter area. Second the conic-gradient represent the purple-blue color wheel. Color choice remains the same.

.background {
  width: 400px;
  height: 400px;
  background-color: black;
  padding: 80px;
  position: relative;
}

.orb {
  width: 50%;
  height: 50%;
  border-radius: 50%;
  filter: blur(25px);
  background: radial-gradient(circle at center, white, transparent 40%), conic-gradient(from 45deg, #663a6d 52deg, #24425e 65deg, #18665c 120deg 307deg, #345a7f 353deg);
}

<div class="background">
  <div class="orb"> </div>

</div>