How to Create a Drop Shadow Only on One Side of an Element

How can I add a box-shadow on one side of an element?

Yes, you can use the shadow spread property of the box-shadow rule:

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

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

How to create a drop shadow only on one side of an element?

UPDATE 4

Same as update 3 but with modern css (=fewer rules) so that no special positioning on the pseudo element is required.

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    position: absolute;
    top: calc(10% - 10px);
    left: calc(50% - 80px);
}

.box-shadow:after {
    content:"";
    position:absolute;
    width:100%;
    bottom:1px;
    z-index:-1;
    transform:scale(.9);
    box-shadow: 0px 0px 8px 2px #000000;
}

<div id="box" class="box-shadow"></div>

Box-Shadow on the left side of the element only

You probably need more blur and a little less spread.

box-shadow: -10px 0px 10px 1px #aaaaaa;

Try messing around with the box shadow generator here http://css3generator.com/ until you get your desired effect.

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/

Drop shadow only on one edge

You can reference the link @thirtydot posted. I would use two div. This would make it exactly like your posted image.

#container{
    width: 200px;
    height: 210px;
    overflow: hidden;
}


#element{
    width: 200px;
    height: 200px;
    background-color:aqua;
    box-shadow: 0px 5px 5px #888;
    float: left;
}
<div id="container">
<div id="element"></div>
</div>

Adding a box-shadow blur to only one side of an element

You could use an after element and stretch it a little:

#bg {  text-align: center;  width: 200px;  height: 200px;  padding: 50px;  background: #eeeeee;}
#box:after {  content:'';  display:block;   position:absolute;  z-index:0;  top:0;  left:-4px;  right:-4px;  bottom:0;  box-shadow: 0px 5px 5px -5px #000000;}
#box {  width: 100%;  height: 100%;  position:relative;  background: yellow;}

<div id="bg">  <div id="box"></div></div>