box shadow to left and right in css

Question

This is css code

    .one-edge-shadow {
    width:200px;
    height:200px;
     border-style: solid; 
    border-width: 1px;    
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
                      }

Using this style , as I show in this fiddle example , the shadow is at the bottom of the box .
I want to drop shadow to the left and right side of the box .
Actually , I'm little weak in CSS :)
Thanks !

http://stackoverflow.com/questions/17416881/box-shadow-only-on-left-and-right — suresh gopal, Mar 21 '14 at 04:30
box-shadow: 25px 0px 25px -25px rgba(0, 0, 0, 0.45), -25px 0px 25px -25px rgba(0, 0, 0, 0.45) — suresh gopal, Mar 21 '14 at 04:31

score 5 · Accepted Answer · answered Mar 21 '14 at 04:34

You have to understand the parameters of box-shadow as well as how the drop shadow works (how the light works).

To do what you wish, you need two different shadows, as one light source cannot possible cast shadows on both sides (it could if it was in front of the box, but than you'd have shadow spreading around the up and down edge as well).

Here's the quick answer:

 box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;

Updated fiddle

What happens here is that you cast a shadow which is offset 10px both to the right and to the left (first parameter offset-x). This alone would achieve what you wish, however, you'd have a blocky shadow (example).

Since you want things to get a bit blurry, you'd have to add the third parameter (blur-radius). Once you do that, you will see the blur creeping from behind your box above and below: that's because behind your box there effectively is another same-sized box, which is however blurred.

To avoid this, you use the fourth parameter (spread-radius) with a negative value to effectively clip the size of the projected box behind your box, so that the top and bottom shadow will be hidden.

score 0 · Answer 2 · answered Mar 21 '14 at 04:51

Hi Zey this is the code paste in your css and you will get what you want.

This is CSS

.one-edge-shadow {
    width:200px;
    height:200px;
     border-style: solid; 
    border-width: 1px;    
    -webkit-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
    -moz-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
    box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
                 }

This is HTML

<div  class="one-edge-shadow"></div>

and check it out in fiddle http://jsfiddle.net/MfV2Y/

score 0 · Answer 3 · answered Mar 21 '14 at 04:52

Try this:

.one-edge-shadow {
    width:200px;
    height:200px;
     border-style: solid; 
    border-width: 1px;
    -webkit-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
    -moz-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
    box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
}

box shadow to left and right in css

3 Answers3