Make box-shadow wider than element itself - html

Question

Is it possible to make a box-shadow CSS call wider than the HTML element to which we are applying it, while keeping the same height as the element to which we are applying it? I can increase the spread, but that will increase the height. As you can see in my snippet, the max width the box-shadow is only as wide as the .box div. Is there a reason why we would not want the box shadow ever wider than the HTML element or why there would be a restriction to this?
.container {
background-color: gray;
height: 100px;
width: 100px;
}
.box {
background-color: blue;
height: 50px;
width: 50px;
box-shadow: 55px 0px 0px 0px rgba(0, 0, 0, .2);
}
.container-spread {
background-color: gray;
height: 100px;
width: 100px;
}
.box-spread {
background-color: blue;
height: 50px;
width: 50px;
box-shadow: 55px 0px 0px 5px rgba(0, 0, 0, .2);
}
<div class="container">
<div class="box">box</div>
container
</div>
<br>
<br>
<div class="container-spread">
<div class="box-spread">box</div>
container
</div>

Answer 1

You can make use of the pseudo element to enlarge the element and then apply box-shadow. height: 100% will make sure the height of the box-shadow is same as the element. The width value will be the key value to change.
.container {
background-color: gray;
height: 100px;
width: 100px;
}
.box {
background-color: blue;
height: 50px;
width: 50px;
position: relative;
}
.box::after {
box-shadow: 85px 0 0 0 rgba(0, 0, 0, 0.2);
content: " ";
height: 100%;
position: absolute;
left: -50%;
top: 0;
width: 150%;
}
<div class="container">
<div class="box">box</div>
container
</div>

Answer 2

While it's not possible to use the spread-radius value to extend the shadow in just the horizontal or vertical directions you can add multiple drop shadows to a single element, the only downside being that any over lap will produce regions of darker shadow. But with a little bit of math you can line them up easily enough.
box-shadow at MDN
.container{ background-color:gray; height:100px; width:100px; }
.box{ background-color:blue;
height:50px;
width:50px;
box-shadow:55px 0px 0px 0px rgba(0,0,0,.2),
105px 0px 0px 0px rgba(0,0,0,.2),
155px 0px 0px 0px rgba(0,0,0,.2) ; }
<div class="container">
<div class="box">box</div>
container
</div>

Answer 3

While box-shadow does have a spread setting, it applies to all sides. As far as I know there is no way of adjusting just the horizontal or vertical size of a box shadow.
You could potentially use two (or more) box shadows to achieve the effect, but it is really only applicable when the spread is set to 0
.container{ background-color:gray; height:100px; width:100px; }
.box{ background-color:blue; height:50px; width:50px;
box-shadow:
55px 0px 0px 0px rgba(0,0,0,.2),
5px 0px 0px 0px rgba(0,0,0,.2); }
<div class="container">
<div class="box">box</div>
container
</div>

Answer 4

Maybe you need this
.container{ background-color:gray; height:100px; width:100px; }
.box{ background-color:blue; height:50px; width:50px; box-shadow:0px 0px 2px rgba(0,0,0,1); }
<div class="container">
<div class="box">box</div>
container
</div>