Как сделать так, чтобы цветовой градиент перетек в коробку-тень?

Question

Я пытаюсь использовать CSS, чтобы создать нечто, похожее на солнце (хотя и с темными цветами), используя радиальный градиент и тень от коробки. Я доволен результатом, за исключением того, что между окружностью круга и рамкой-тенью есть маленькая белая граница, от которой я не могу избавиться; Я бы хотел, чтобы с края круга к тени был беззаботный переход. Я даю div следующее 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 />

Я пробовал разные типы границ, я играл с размытостью и распространением тени, но, кажется, ничто не избавляет от белой границы. Любая помощь будет принята с благодарностью!

Answer 1

A drop-shadow фильтр может быть лучше здесь

#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>

Answer 2

Проблема в том, что border-radius создает острые края вокруг, поэтому любой цвет позади этого элемента будет кровоточить внутри.

Вместо этого мы можем использовать фон для создания эффекта блока теней без border-radius

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

<div></div>