css3 box shadows in one direction only?

I have an element that has inset box shadows, but I want the shadow on only the top.

Is there no way to set only the top shadow? Do I have to resort to creating additional elements to overlay the side shadows?

This is technically the same answer as @ChrisJ, with a few more details on how to make box-shadow do your bidding:

for reference _{the * items are optional}:

box-shadow: <inset*> <offset-x> <offset-y> <blur-radius*> <spread-radius*> <color*>;

The <spread-radius> needs to be negative <blur-radius> (so that none of the other blurred sides show up), and then you need to bump the <offset-y> down by the same amount:

box-shadow: inset 0 20px 20px -20px #000000;

It will give you a single gradient band across the top of the element.

box-shadow offsets the shadow by a given amount in each direction. So you need x-offset to be 0, and y-offset to be something negative.

Additionally, you have to play with the blur-radius and spread-radius so that the shadow is not visible on the left and right sides.

Example:

box-shadow: #777 0px -10px 5px -2px;

See the description on the Mozilla Developer Network.

A better way would be using a background gradient, here are both side to side.

http://jsfiddle.net/wh3L8/

Example:

  box-shadow: 0 2px 0px 0px red inset;

The First parameter and second parameters specifies the offset of shadow to x-direction and y-direction respectively. Third parameter specifies the blur distance. Finally, the fourth parameter specifies the spread distance.

Specifying only the second parameter with the offset you want gives the top shadow without side shadows.

Demo can be found here: http://jsfiddle.net/rEdBy/

A very nice tutorial on CSS3 Box shadows - http://www.css3.info/preview/box-shadow/

Here is my example please try once

-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;

Here's a little hack that I did.

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

1. Create a <div class="one_side_shadow"></div> right below the element that I want to create the one-side box shadow (in this case I want a one-sided inset shadow for id="element" coming from the bottom)

2. Then I created a regular box shadow using a negative vertical offset to push the shadow upwards to one-side.

   box-shadow: 0 -8px 20px 2px #DEDEE3;

Maybe try using box-shadow:

box-shadow: h-shadow v-shadow blur spread color inset;

with overflow-x:

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

use overflow-x: hidden; and box-shadow: 0px 10px 16px -10px #000;