How do I remove only the top part of a box-shadow?

Question

I'm using border-radius and box-shadow to make a glow around an element.

Can I remove only the top part of the box-shadow?

Live example

div {
    margin-top: 25px;
    color: #fff;
    height: 45px;
    margin-top: -5px;
    z-index: -10;
    padding: 26px 24px 46px;
    font-weight: normal;
    background: #000; /*#fff;*/
    border-top: 0px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    -webkit-border-radius: 3px;
     -khtml-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
     -khtml-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
       -moz-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
            box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
}

Edit: this little thingy is the problem!

Answer 1

You can try the following. My method only uses CSS.

Example Link : http://jsfiddle.net/kL8tR/56/

div{
    margin-top: 25px;
    color: #fff;
    height: 45px;

    padding: 26px 24px 46px;

    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    border-top: none;

    -moz-box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);
    -webkit-box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);
    box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);

}

Basically what I am doing, I am creating multi-layer shadows, so the first shadow overlays the second layer, masking the top section.

I have used this before, here is my reference :

Look under section - Layering multiple shadows [ http://www.css3.info/preview/box-shadow/ ]

Answer 2

you could just shift the shadow lower down (vertical displacement) and reduce the shadow radius, something along the lines of (replace the asterisk with the amount of pixels needed to just cover the top shadow with the box itself):

box-shadow: 0 *px 10px 0 rgba(200,200,200,0.7);

Answer 3

This works, but I'll admit to not knowing if there's a better way (or if it's possible without adding a wrapper element). Using multiple box-shadows would be a good idea, but I can't seem to make it look the same.

See: http://jsfiddle.net/thirtydot/8qEUc/3/

HTML:

<div id="bla">
    <div> something </div>
</div>

CSS:

#bla {
    overflow-y: hidden;
    padding: 0 10px 10px 10px;
    margin: 0 -10px
}
#bla > div {
    /* the CSS from your question here */
}

Answer 4

If you use a negative spread radius and calibrate the other parameters to suit what your looking for it should give you the desired effect.

CSS Box Shadow Negative Radius Spread

div {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  -webkit-box-shadow: 5px 5px 10px -6px black;
  -moz-box-shadow: 5px 5px 10px -6px black;
  box-shadow: 5px 5px 10px -6px black;
}

<div></div>

Answer 5

Since you use box-shadow, you can use pseudo-element to create it and place under your div, placing it so only the needed parts would be visible: http://jsfiddle.net/kL8tR/60/

There are some important notes:

• The pseudo-element must have z-index: -1
• The div itself must have position: relative and no z-index

Pseudo-elements + CSS3 = awesomeness :)

Answer 6

@milo; is not your top border it's a shadow which you give in your code

for removing top glow you have to define vertical spacing of your shadow.

Write this in your shadow css:

box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-moz-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-webkit-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-khtml-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;

& your can generate from here http://css3generator.com/

NOTE: there are four properties of shadow are horizontal, vertical, blur & spread for inside shadow you can define inset for it