html - box shadow to left and right in css -

this question has answer here:

• box-shadow on left , right 1 answer

this 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 style , show in this fiddle example , shadow @ bottom of box .
want drop shadow left , right side of box .
, i'm little weak in css :)
!

you have understand parameters of box-shadow how drop shadow works (how light works).

to wish, need 2 different shadows, 1 light source cannot possible cast shadows on both sides (it if in front of box, you'd have shadow spreading around , down edge well).

here's quick answer:

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

updated fiddle

what happens here cast shadow offset 10px both right , left (first parameter offset-x). alone achieve wish, however, you'd have blocky shadow (example).

since want things bit blurry, you'd have add third parameter (blur-radius). once that, see blur creeping behind box above , below: that's because behind box there same-sized box, blurred.

to avoid this, use fourth parameter (spread-radius) negative value clip size of projected box behind box, top , bottom shadow hidden.