Box-Shadow Arc CSS

Question

I am attempting to replicate something similar to this:

Where the shadow from the bottom of the div arcs somewhat, being higher at the center and then thinning out into nothing further out.

I wonder if this can be achieved with some kind of box-shadow effect in css. Currently I have a box shadow coming up from the bottom of my div that stays flat the entire way along.

Current box-shadow as requested:

box-shadow: inset 0 -30px 30px -30px #888888;

Any suggestions appreciated.

Answer 1

You could create a pseudo selector that inserts some content on to the page, make it rounded and apply the box shadow to it. Note the z-index to make it go behind the parent:

http://plnkr.co/edit/UhdRAuJ0VIPHrnufkwm9?p=preview

.shadowy {
  position: relative;
  width: 100%;
  height: 40px;
  border: 1px solid black;
  margin-top: 100px;
  background: white;
}

.shadowy:before {
  content: '';
  position: absolute;
  background: transparent;
  top: 0;
  left: 10%;
  width: 80%;
  height: 20px;
  box-shadow: 0 0 30px black;
  border-radius: 100%;
  z-index: -1;
}