Search code examples
cssbox-shadow

box shadow to left and right doesn't work

I want to make box-shadow to the left and right sides,however there is alway a shadow in the top of the box,I have checked my code many times.

#box {
  margin: 0 auto;
  margin-top: 0px;
  border: 1px solid #ffffff;
  border-top-color: #e99f2e;
  overflow: hidden;
  box-shadow: 2px 0 20px 2px #7f7e7f, -2px 0 20px 2px #7f7e7f;
}
<div id="box"></div>

Solution

  • First understand the syntax of box-shadow and then it get's easy to apply box-shadow at any side as you have planned your design,

    syntax -
box-shadow : offset-x | offset-y | blur-radius | spread-radius | color


    #box {
  margin: 0 auto;
  margin-top: 0px;
  overflow: hidden;
  box-shadow: -10px 0 2px -2px #7f7e7f, 10px 0 2px -2px #7f7e7f;
  height: 150px;
  width: 50%;
  background:#cff;
  margin-top:20px;
}
    <div id="box"></div>