How to Get Box-Shadow on Left & Right Sides Only

How to get box-shadow on left & right sides only

NOTE: I suggest checking out @Hamish's answer below; it doesn't involve the imperfect "masking" in the solution described here.

You can get close with multiple box-shadows; one for each side

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/YJDdp/

Edit

Add 2 more box-shadows for the top and bottom up front to mask out the that bleeds through.

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/LE6Lz/

Box-Shadow Only on Left and Right

Use a negative value on spread-radius (4th value) to shrink the shadow. This can hide the unwanted top and bottom shadow.

box-shadow: inset 25px 0px 25px -25px rgba(0,0,0,0.45), inset -25px 0px 25px -25px rgba(0,0,0,0.45);

See DEMO.

Box Shadow only in the middle(Left-right) horizontaly

One very simple way of doing this would be to make use of pseudo-elements and put a shadow on those. Then position them absolutely relative to the left and right of your main div, with a lower z-index. Add border-radius for extra radial effect.

For example:

#login {    position: relative;    width: 200px; height: 200px; margin: 32px;    background: rgb(247, 247, 247);    border: 1px solid rgba(147, 184, 189, 0.8);}#login::before, #login::after {     content: ''; position: absolute; z-index: -1;    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); border-radius: 50%;}#login::before { top: 15%; left: 0; width: 10%; height: 70%; }#login::after { top: 15%; right: 0; width: 10%; height: 70%; }

<div id="login"></div>

.myDiv{  border: 1px solid #333;  width: 100px;  height: 100px;  box-shadow: 10px 0 5px -2px #888;}

<div class="myDiv"></div>