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

To get the clipped effect on up to two sides you can use pseudo elements with background gradients.

header::before, main::before, footer::before, header::after, main::after, footer::after {
    display:    block;
    content:    '';
    position:   absolute;
    width:      8px;
    height:     100%;
    top:        0px;
}

header::before, main::before, footer::before {
    left:       -8px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

header::after, main::after, footer::after {
    right:      -8px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

will add a nice shadow-like effect to the left and right of the elements that normally make up a document.

My self-made solution which is easy to edit:

HTML:

<div id="anti-shadow-div">
    <div id="shadow-div"></div>
</div>​

css:

#shadow-div{
    margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
    margin-left:0px; /* Set to 20px if you want shadow at the left side */
    margin-top:0px; /* Set to 20px if you want shadow at the top side */
    margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
    box-shadow: 0px 0px 20px black; 
    height:100px;
    width:100px;
    background: red;
}

#anti-shadow-div{
    margin:20px;
    display:table;
    overflow:hidden;
}​

Demo:
http://jsfiddle.net/jDyQt/103

clip-path is now (2020) one of simplest ways to achieve box-shadows on specific sides of elements, especially when the required effect is a "clean cut" shadow at particular edges (which I believe was what the OP was originally looking for) , like this:

.shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 15px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px 0px);
}

<div class="shadow-element"></div>

...as opposed to an attenuated/reduced/thinning shadow like this:

.shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 15px 0px 15px -10px rgba(0,0,0,0.75);
}

<div class="shadow-element"></div>

Simply apply the following CSS to the element in question:

box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);

Where:

• Apx sets the shadow visibility for the top edge
• Bpx right
• Cpx bottom
• Dpx left

Enter a value of 0 for any edges where the shadow should be hidden and a negative value (the same as the box-shadow blur radius - Xpx) to any edges where the shadow should be displayed.

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>

The fourth property there -2px is the shadow spread, you can use it to change the spread of the shadow, making it appear that the shadow is on one side only.

This also uses the shadow positioning rules 10px sends it to the right (horizontal offset) and 0px keeps it under the element (vertical offset.)

5px is the blur radius :)

Example for you here.