Reproduce a complex gradient in CSS

Question

I'm trying to reproduce (as close as possible) in CSS a gradient I've seen.

I managed to get close to it but I can't do better.

Here is the image of the gradient: Gradient to reproduce

And here is my HTML / CSS code:

*, *:before, *:after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }

body {display: flex; align-items: center; justify-content: center;}

.logo {
    background:
        radial-gradient(circle farthest-corner at 10% 90%, #FFF200, transparent 50%),
        radial-gradient(circle farthest-corner at 10% 130%, #FFF200, transparent 50%),
        radial-gradient(circle farthest-corner at 150% 150%, #ed4444, transparent),
        radial-gradient(circle farthest-corner at 170% 170%, #ed4444, transparent),
        linear-gradient(#627AFF 40%, transparent);
    border-radius: 50%;
    font-size: 250px;
    height: 1em;
    position: relative;
    width: 1em;
}

.logo:before {
    content: "D";
    color: white;
    position: absolute;
    left: 67px;
    top: 17px;
    font-size: 175px;
}

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

Thank you in advance,

Answer 1

the best i can do for you, wish it helps you. good luck,

.logo {
  background: 
  radial-gradient(circle farthest-side at 50% 180%, white 15%, transparent 20%),
  radial-gradient(closest-corner at 121% 84%, #ef5d5d 190%, transparent 307%),
  radial-gradient(closest-side at 40% 77%, #fff64d 76%, transparent 185%),
  linear-gradient(#9933ff 10%, transparent);
  border-radius: 50%;
  font-size: 250px;
  height: 1em;
  position: relative;
  width: 1em;
}

.logo:before {
font-family: 'Brush Script MT', cursive;
  content: "D";
  color: white;
  position: absolute;
  left: 67px;
  top: 17px;
  font-size: 175px;
}

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