How to create a centered rounded shadow smaller than element width?

Question

I'm trying to make shadow like this below but I don't know how to make shadow like this in css. Can any one help me to make this style?

Answer 1

You can try with negative box spread shadow distance like this:

.item {
  height: 30px;
  width: 200px;
  border: 1px solid black;
  box-shadow: 0 8px 6px -6px black;
}

<div class="item"> </div>

Or take a look at those examples: https://paulund.co.uk/learn-css-box-shadow.