Как бы вы сделали так, чтобы тень выглядела так? ⇐ CSS

[Anonymous]

Как здесь: https://jsfiddle.net/h3rn1pgy/

Код: Выделить всё

body {
height: 100vh;
overflow: hidden;
}

figure {
width: 100%;
height: 100%;
margin: 0 !important;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
}

.stripes-wraper {
width: 450px;
height: 450px;
border-radius: 50%;
filter: drop-shadow(0 0 20px #F29);
overflow: hidden;
position: absolute;
}

.stripe {
width: 100%;
height: 15px;
background-color: #FFF;

}

.stripe + .stripe {
margin-top: 15px;
}

.gradient-mask {
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #92F 0%, #F29 100%);
mix-blend-mode: multiply;
position: absolute;
}

Код: Выделить всё

Изображение
Как я могу включить эффект тени из предыдущего кода в следующий код?
Мне не удалось это понять.
код: https://jsfiddle.net/ocw72kh3/

Код: Выделить всё

body {
height: 100vh;
overflow: hidden;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
background: #000;
}

.sun {
width: 50%;
max-width: 450px;
aspect-ratio: 1 / 1;
border-radius: 50%;
filter: drop-shadow(0 0 20px #f29);
background: linear-gradient(
to bottom,
transparent,
transparent 50%,
#000 50%,
#000 100%
),
linear-gradient(to bottom, #92f 0%, #f29 100%);
background-size: 100% 8.4%, 100% 100%;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/782 ... -like-this