Css3 box of shadows in only one direction?

Question

I have an element with insert shadows, but I want the shadow to be only on top.

Is there no way to set only the top shadow? Should I resort to creating additional elements for applying side shadows?

Answer 1

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

For reference, the _{elements * are optional} :

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

<spread-radius> should be negative <blur-radius> (so that none of the other blurry sides appear), and then you need to drop <offset-y> down by the same amount:

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

It will give you one gradient bar at the top of the element.

Answer 2

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

In addition, you must play with a blur radius and radius radius so that the shadow is not visible from the left and right side.

Example:

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

See the description in the Mozilla Developer Network .

Answer 3

The best way would be to use a background gradient, here are both sides.

http://jsfiddle.net/wh3L8/

Answer 4

Example:

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

The first parameter and the second parameter determine the shadow offset in the x and y direction, respectively. The third parameter indicates the blur distance. Finally, the fourth parameter indicates the propagation distance.

Setting 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 good CSS3 tutorial on Shadow Boxes - http://www.css3.info/preview/box-shadow/

Answer 5

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; 

Answer 6

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> 

• Create a <div class="one_side_shadow"></div> right below the element that I want to create a one-sided window shadow (in this case, I want the one-sided shadow insertion for id="element" appear below)

• Then I created a regular box shadow using a negative vertical offset to push the shadow up to one side.

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

Answer 7

Perhaps try using box-shadow:

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

overflow-x:

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

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