curved shape with curved line with blur effect CSS - html

Question

the result I need to get:
what i have so far
header {
min-height: 300px;
background: #000;
}
main {
position: relative;
width: 100%;
overflow: hidden;
min-height: 300px;
}
main:before {
content: '';
position: absolute;
background: #000;
top: 0;
left: 0;
width: 100%;
height: 200px;
}
main:after {
content: '';
position: absolute;
top: 0rem;
background: #141f36;
width: 120%;
height: 300px;
margin-left: -10%;
margin-right: 10%;
border-radius: 200vh 200vh 0% 0% / 20vh 20vh 0% 0%;
}
<div class="page">
<header></header>
<main></main>
</div>
I have no idea how to make the line, can someone help me with this?
NOTE: the line needs to have blur/bright/light effect just like in the example image

Answer 1

Here is a single div idea with radial-gradients.
div {
min-height: 400px;
width: 100%;
/* you can change these variables to see what they do */
--top-distance: 3%;
--line-width: 0.3%;
--blur: 0.5%;
--gradient-top-distance: 100px;
--s: 350%; /* increase this to reduce the slope. */
background: radial-gradient(farthest-side at center bottom, transparent 0 calc(100% - (var(--top-distance) + var(--blur)*2 + var(--line-width))), #0c5dd3 calc(100% - (var(--top-distance) + var(--blur) + var(--line-width))) calc(100% - (var(--top-distance) + var(--blur))), transparent calc(100% - var(--top-distance)) 100%) 50% calc(100% + var(--gradient-top-distance))/var(--s) 100% no-repeat,
radial-gradient(farthest-side at center bottom, #141f36 99%, transparent 100%) 50% calc(100% + var(--gradient-top-distance))/var(--s) 100% no-repeat;
background-color: #000;
}
<div></div>

Answer 2

You can add another pseudo element where you apply a blur filter
main {
position: relative;
overflow: hidden;
min-height: 400px;
background: #000;
}
main:before,
main:after{
content: '';
position: absolute;
height:300px;
background: #141f36;
left:-10%;
right:-10%;
bottom:0;
border-radius: 200vh 200vh 0% 0% / 20vh 20vh 0% 0%;
}
main:after {
border:3px solid #0c5dd3;
filter:blur(1px);
bottom:-22px;
background:none;
}
<main></main>