So you use a negative spread-radius to make the shadow more narrow than the box. Cool!
The only problem with this (and it is infuriating) is that while Chrome and Firefox render box positive box-shadow values identically, they differ substantially with negative values. As a result, to get matching shadows you will need to use browser-specific shadows.
Thanks for sharing! I am aware of the spread property and using it as you have in the demo works well. The main reason I use a separate element most times is for when I want the shadow to render at ~60-70% the width of its parent. Not sure there is a way to do that with box-shadow directly, unless I've overlooked something?
If you were aware of this option, you should've mentioned it in the intro of your post, before getting into a solution for a specific case not covered by it.
You're absolutely correct. Once I get a little time I will update the post with those details (and be sure to link you credit for giving me a heads up)
Credit gkoberger, not me.
I avoid using this 4th param "spread", as the effect varies wildly between browsers. Safari and Chrome, the two most popular browsers on mobile, are also the two most different, with Firefox and IE/Edge (pre-Chromium) landing in between.