53

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?

7 Answers 7

129

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.

3
  • 25
    Thank you for your Snippet, helped me very much. Just for the lazy ones here's a full codeline for each side: box-shadow: inset 15px 0 15px -15px black;//left box-shadow: inset -15px 0 15px -15px black;//right box-shadow: inset 0 15px 15px -15px black;//top box-shadow: inset 0 -15px 15px -15px black;//bottom edit: Sorry, couldn't get formatting right, dunno why, added two spaces. Would be nice if an admin could format it the right way.
    – Dominik
    Aug 27, 2012 at 18:02
  • To create a shadow at the bottom, just make the y offset -20px
    – Kevin C.
    Apr 19, 2013 at 23:20
  • 1
    Once you got the rule, you can play with looks here: cssmatic.com/box-shadow
    – Kulbi
    Dec 11, 2013 at 13:29
12

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.

4
  • No, that doesn't work. the offsets are x and y not left and right.
    – Mark
    Jan 21, 2011 at 8:00
  • I didn't say that: x-offset is the horizontal offset; y-offset is the vertical offset. So to have the drop shadow at the top, you need to have y-offset < 0.
    – ChrisJ
    Jan 21, 2011 at 15:10
  • @Mark it does work if you understand how to use <spread-radius>
    – zzzzBov
    Jan 21, 2011 at 20:02
  • Evidently you're right, sorry I did not understand your answer. My apologizes.
    – Mark
    Jan 22, 2011 at 7:33
2

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

http://jsfiddle.net/wh3L8/

1
  • 1
    The box-shadow actually looks better to me.
    – alexvance
    Dec 28, 2012 at 17:21
2

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/

1

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;
0

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;

0

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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.