[css] CSS3 Box Shadow on Top, Left, and Right Only

Greetings,

I am trying to apply a CSS3 box shadow to only the top, right, and left of a DIV with a radius that matches the result of the following CSS (minus the bottom shadow)

 #div {
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
}

What would be the best way to accomplish this?

Thanks!

UPDATE This shadow will be applied to a nav bar on a page, the bar is positioned on the top of the main container DIV. What I am trying to accomplish is to continue the box shadow of the main DIV onto the nav bar, which sits above it, but without a bottom shadow on the nav bar. Take a look at the site itself to see what I'm talking about, easier than adding all of the HTML and CSS here.

UPDATE 2 Since the DIV I am working with is singular, rather than trying to place a shadow on each nav li, I elected to change it to the following:

-webkit-box-shadow: 0px -4px 7px #e6e6e6;
    -moz-box-shadow: 0px -4px 7px #e6e6e6;
    box-shadow: 0px -4px 7px #e6e6e6;

This makes the top of the shadow very noticeable but it's what I am trying to accomplish - if anyone knows of a way to keep the shadow the same in appearance to the container DIV, please let me know. Thanks!

use the spread value...

box-shadow has the following values

box-shadow: x y blur spread color;

so you could use something like..

box-shadow: 0px -10px 10px -10px black;

UPDATE: i'm adding a jsfiddle

I fixed such a problem by putting a div down the nav link

 <div [ngClass]="{'nav-div': tab['active']}"></div>

and giving this css to it.

.nav-div {
    width: inherit;
    position: relative;
    height: 8px;
    background: white;
    top: 4px
  }

and nav link css as

 .nav-link {
    position: relative;
    top: 8px;

    &.active {
      box-shadow: rgba(0, 0, 0, 0.3) 0 1px 4px -1px;
    }
  }

Hope this helps!

Adding a separate answer because it is radically different.

You could use rgba and set the alpha channel low (to get transparency) to make your drop shadow less noticeable.

Try something like this (play with the .5)

-webkit-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);
-moz-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);
box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);

Hope this helps!

#div:before {
 content:"";
 position:absolute;
 width:100%;
 background:#fff;
 height:38px;
 top:1px;
 right:-5px;
}

I know this is very old, but none of these answers helped me, so I'm adding my answer. This, like @yichengliu's answer, uses the Pseudo ::after element.

#div {
    position: relative;
}



#div::after {
    content: '';
    position: absolute;
    right: 0;
    width: 1px;
    height: 100%;
    z-index: -1;

    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
}

/*or*/

.filter.right::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: white;
    z-index: -1;

    -webkit-filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
}

Fiddle

If you decide to change the X of the drop shadow (first pixel measurement of the drop-shadow or box-shadow), changing the width will help so it doesn't look like there is a white gap between the div and the shadow.

If you decide to change the Y of the drop shadow (second pixel measurement of the drop-shadow or box-shadow), changing the height will help for the same reason as above.

I was having the same issue and was searching for a possible idea to solve this.

I had some CSS already in place for my tabs and this is what worked for me:

(Note specifically the padding-bottom: 2px; inside #tabs #selected a {. That hides the bottom box-shadow neatly and worked great for me with the following CSS.)

#tabs {
    margin-top: 1em;
    margin-left: 0.5em;
}
#tabs li a {
    padding: 1 1em;
    position: relative;
    top: 1px;
    background: #FFFFFF;
}
#tabs #selected {
    /* For the "selected" tab */
    box-shadow: 0 0 3px #666666;
    background: #FFFFFF;
}
#tabs #selected a {
    position: relative;
    top: 1px;
    background: #FFFFFF;
    padding-bottom: 2px;
}
#tabs ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#tabs li {
    float: left;
    border: 1px solid;
    border-bottom-width: 0;
    margin: 0 0.5em 0 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

Thought I'd put this out there as another possible solution for anyone perusing SO for this.

You can give multiple values to box-shadow property
eg

-moz-box-shadow: 0px 10px 12px 0px #000,
                    0px -10px 12px 0px #000;
-webkit-box-shadow: 0px 10px 12px 0px #000,
                    0px -10px 12px 0px #000;
box-shadow: 0px 10px 12px 0px #000,
            0px -10px 12px 0px #000;

it is drop shadow to left and right only, you can adapt it to your requirements

The following code did it for me to make a shadow inset of the right side:

-moz-box-shadow: inset -10px 0px 10px -10px #000;
-webkit-box-shadow: inset -10px 0px 10px -10px #000;
box-shadow: inset -10px 0px 10px -10px #000;

Hope it will help!!!!

I found a way to cover the shadow with ":after", here is my code:

#div:after {
    content:"";
    position:absolute;
    width:5px;
    background:#fff;
    height:38px;
    top:1px;
    right:-5px;
}