html - Hard lines/boxes exposed behind extreme box-shadow effect? -

how 1 eliminate effect it's clean box-shadow glow?

https://jsfiddle.net/stu9qjlp/2/

code:

#test {     border: 1px solid red;     border-radius: 1px;     width: 1px;     height: 1px;     box-shadow: 0 0 250px 125px red; } 

a radial gradient perhaps?

body {    margin: 0;    height: 100vh;    background: #000;  }    body::before {    content: '';    position: absolute;    height: 100%;    width: 100%;    background-image: radial-gradient(ellipse @ center top, red, black 50%, black);  }