如何将Canvas绘制的太阳渐变效果转换为完全一致的CSS渐变实现

以下是我想要转换为CSS渐变的Canvas太阳效果，下方是Canvas实现的完整代码，我希望最终CSS渐变效果和Canvas绘制的图像完全一致。

原Canvas实现代码 #

JavaScript代码 #

let s = document.createElement("canvas");
s.width = s.height = 512;
let sun = s.getContext("2d");

let canvas = document.getElementById("c");
canvas.width = canvas.height = 512;
let ctx = canvas.getContext("2d");

let gradient = sun.createLinearGradient(0, 50, 0, canvas.height-50);
gradient.addColorStop(0, '#fbf120ff');

gradient.addColorStop(0.355, "#fd8227ff");
gradient.addColorStop(0.356, "#fd822700");
gradient.addColorStop(0.364, "#fd822700");
gradient.addColorStop(0.365, "#fd8227ff");

gradient.addColorStop(0.42, "#fe6828ff");
gradient.addColorStop(0.421, "#fe682800");
gradient.addColorStop(0.434, "#fe682800");
gradient.addColorStop(0.435, "#fe6828ff");

gradient.addColorStop(0.49,"#fe5430ff");
gradient.addColorStop(0.491,"#fe543000");
gradient.addColorStop(0.509,"#fe543000");
gradient.addColorStop(0.51,"#fe5430ff");

gradient.addColorStop(0.562,"#fe4b38ff");
gradient.addColorStop(0.563,"#fe4b3800");
gradient.addColorStop(0.582,"#fe4b3800");
gradient.addColorStop(0.584,"#fe4b38ff");

//64 -- fe3446
gradient.addColorStop(0.63,"#fe3446ff");
gradient.addColorStop(0.631,"#fe344600");
gradient.addColorStop(0.657,"#fe344600");
gradient.addColorStop(0.658,"#fe3446ff");

//73 -- fe2558
gradient.addColorStop(0.710,"#fe2558ff");
gradient.addColorStop(0.711,"#fe255800");
gradient.addColorStop(0.739,"#fe255800");
gradient.addColorStop(0.74,"#fe2558ff");

//80 -- fe1f5f
gradient.addColorStop(0.785,"#fe1f5fff");
gradient.addColorStop(0.786,"#fe1f5f00");
gradient.addColorStop(0.825,"#fe1f5f00");
gradient.addColorStop(0.826,"#fe1f5fff");
//87 -- fe1967
gradient.addColorStop(0.860,"#fe1967ff");
gradient.addColorStop(0.861,"#fe196700");
gradient.addColorStop(0.905,"#fe196700");
gradient.addColorStop(0.906,"#fe1967ff");
//94 -- ff1270
gradient.addColorStop(.940, '#ff1270ff');
gradient.addColorStop(.941, '#ff127000');
sun.fillStyle = gradient;
sun.beginPath();
sun.arc(canvas.height/2, canvas.height/2, 206, 0, 2 * Math.PI);
sun.fill();

ctx.shadowColor = '#ff0d77af';
ctx.shadowBlur = 50;
ctx.drawImage(s, 0,0);

CSS代码 #

body{
  background-color: #191231;
}

HTML代码 #

<body>
<canvas id=c></canvas>
</body>

原Canvas效果示意图 #

#

当前CSS渐变尝试实现 #

以下是我将Canvas太阳转换为CSS渐变的尝试代码，当前实现效果与Canvas图像并不完全一致，请问该如何优化调整才能让效果更贴近原图？

CSS代码 #

body {
  background-color: #191231;
}

.sun {
  margin: 2rem;
  position: relative;
  width: 412px;
  padding-top: 412px;
  background: linear-gradient(#fbed20 0%,
      #fd8427 30%,
      rgba(0, 0, 0, 0) 30%,
      rgba(0, 0, 0, 0) 30.5%,
      #ff8427 30.5%,
      #fe6928 38%,
      rgba(0, 0, 0, 0) 38%,
      rgba(0, 0, 0, 0) 39%,
      #fe6928 39%,
      #fe5430 45%,
      rgba(0, 0, 0, 0) 44%,
      rgba(0, 0, 0, 0) 46.5%,
      #fe5430 46.5%,
      #fe4b38 52%,
      rgba(0, 0, 0, 0) 52%,
      rgba(0, 0, 0, 0) 53.5%,
      #fe4b38 53.5%,
      #fe3446 59%,
      rgba(0, 0, 0, 0) 59%,
      rgba(0, 0, 0, 0) 61%,
      #fe3446 61%,
      #fe2558 66%,
      rgba(0, 0, 0, 0) 66%,
      rgba(0, 0, 0, 0) 69%,
      #fe2558 69%,
      #fe1f5f 74%,
      rgba(0, 0, 0, 0) 74%,
      rgba(0, 0, 0, 0) 77%,
      #fe1f5f 77%,
      #fe1967 84%,
      rgba(0, 0, 0, 0) 84%,
      rgba(0, 0, 0, 0) 88%,
      #fe1967 88%,
      #fe126f 92%,
      rgba(0, 0, 0, 0) 92%,
      rgba(0, 0, 0, 0) 100%);
  border-radius: 50%;
  box-shadow: 0px -50px 50px rgba(255, 13, 119, 0.686);
}

.sun:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: 50%;
  background: linear-gradient(rgba(255, 13, 119, 0.686), rgba(0, 0, 0, 0));
}

HTML代码 #

<div class="sun"></div>

当前CSS实现效果示意图 #

内容的提问来源于stack exchange，提问作者user17382064