How to make a drop shadow go all the way across the edge of a div, not inset

Question

This is a super simple issue that I can't figure out.

I want to have a drop shadow go all the way across the bottom of a div. As it is, it covers most of the bottom:

And here is the code:

box-shadow: 0px 20px 15px -15px rgba(0, 0, 0, 0.49)

I need the shadow to go all the way across on both sides.

Thanks

EDIT: Am I going about this wrong? Should I be using some other CSS property?

Answer 1

To avoid the top shadow, add vertical offset and adjust your other parameters accordingly. In addition, set the spread distance to be 0 or greater and you'll cover your horizontal border.

Start with this:

box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.49)

If you're not getting the full horizontal border covered, increase the 4th value slightly until it looks good. Adjust your vertical offset accordingly as well if needed.

It would be helpful to see your html / css for the actual box as well.