How to convert canvas sun to css gradient

Issue

Here is the canvas sun I am trying to convert to a css gradient.

Below this was my attempt at replicating this image as a css gradient.

Trying to make the gradient look identical to the canvas image.

https://jsfiddle.net/rwj1Lacg/

        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);
body{
  background-color: #191231;
}
<body>
<canvas id=c></canvas>
</body>

enter image description here

Here is my attempt at converting the canvas sun to a css gradient.

How can this be improved and made better? https://jsfiddle.net/vzpew31s/

This doesn’t look exactly the same/ identical to the canvas image.

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));
}
<div class="sun"></div>

enter image description here

Solution

Remove shadow from .sun and add it to .sun:before. Also, have same color gradient with different alpha for .sun:before. And adjust bottom.

body {
  background-color: #191231;
}

.sun {
  margin: 2rem;
  position: relative;
  width: 412px;
  padding-top: 412px;
  background: linear-gradient(#fbed20 0%,
      #fd8427 28.5%,
      transparent 29%,
      rgba(0, 0, 0, 0) 29% 30%,
      #ff8427 30%,
      #fe6928 37.2%,
      rgba(0, 0, 0, 0) 37.2%,
      rgba(0, 0, 0, 0) 39%,
      #fe6928 39%,
      #fe5430 43.5%,
      rgba(0, 0, 0, 0) 43%,
      rgba(0, 0, 0, 0) 45.5%,
      #fe5430 45.5%,
      #fe4b38 51%,
      rgba(0, 0, 0, 0) 51%,
      rgba(0, 0, 0, 0) 53.5%,
      #fe4b38 53.5%,
      #fe3446 58.6%,
      rgba(0, 0, 0, 0) 58.6%,
      rgba(0, 0, 0, 0) 61%,
      #fe3446 61%,
      #fe2558 67%,
      rgba(0, 0, 0, 0) 67%,
      rgba(0, 0, 0, 0) 70%,
      #fe2558 70%,
      #fe1f5f 75%,
      rgba(0, 0, 0, 0) 75%,
      rgba(0, 0, 0, 0) 79%,
      #fe1f5f 79%,
      #fe1967 83%,
      rgba(0, 0, 0, 0) 83%,
      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 -0px 50px rgba(255, 13, 119, 0.686);*/
  
}

.sun:before {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  right: 5px;
  /* change this to move bottom shadow up */
  bottom: 40px; 
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(rgba(255, 13, 119, 0.65), rgba(255, 13, 119, 0.1));
  box-shadow: 0px -0px 60px rgba(255, 13, 119, 0.6);  
}
<div class="sun"></div>

Answered By – onkar ruikar

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published