How do I make color gradient flow into box-shadow?

Question

I'm trying to use CSS to create something that looks like a sun (albeit with dark colors) by using a radial gradient and a box-shadow. I'm happy with the result except that there is a small white border between the circumference of the circle and the box-shadow that I can't seem to get rid of; I'd like there to be a seemless transition from the edge of the circle to the shadow. I'm giving a div the following CSS:

#gradient-circle {

    background: radial-gradient(#545C6F, #3E4452); 
    border: 0;
    height: 25vh;
    width: 25vh;
    border-radius: 50%;
    box-shadow: 0px 0px 3vw 1vw #3E4452;

    }

<div id=gradient-circle />

I've tried all different border types, I've played around with the shadow blur and spread, but nothing seems to get rid of the white border. Any help would be greatly appreciated!

Answer 1

The issue is that border-radius produces sharp edges around so whatever color is behind that element will bleed inside.

Instead we can use a background to produce the shadow box effect without border-radius

div {
  background: radial-gradient(100% 100% at 50% 50%, #545C6F 0, #3E4452 40%, #ffffff00 50%);
  height: 300px;
  width: 300px;
}

<div></div>

Answer 2

A drop-shadow filter can do better here

#gradient-circle {
  background: radial-gradient(#545C6F, #3E4452);
  border: 0;
  height: 25vh;
  width: 25vh;
  border-radius: 50%;
  filter:drop-shadow(0px 0px 2vw #3E4452) drop-shadow(0px 0px 3vw #3E4452);
}

<div id=gradient-circle ></div>