Box-shadow only on right and left

Question

I need to make a box-shadow only on the right and left of an element. It should fade and get thinner to the top and bottom. It also shouldn\'t oveflow on top and bottom.

Answer 1

I think the most elegant semantical way must be to wrap that element inside a div, with overflow-y: hidden; and padding: 0 [horizontal-spread-box-shadow]. Here is the exaggerated example:

body {
  padding: 50px;
}

.parent {
  display: inline-block;
  border: 2px solid red;
  overflow-y: hidden;
  padding: 0 40px;
}

.children {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 40px #000;
  background: blue;
}