CSS3 Box Shadow on Top Left and Right Only

Question

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

div before    content      position absolute   width 100    background  fff   height 38px   top 1px   right -5px

User · Answer

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

User · Answer

It s better if you just cover the bottom part with another div and you will get consistent drop shadow across the board    servicesContainer       your css     position  relative      and it s fixed  like magic

User · Answer

I fixed such a problem by putting a div down the nav link   lt div  ngClass   quot   nav-div   tab  active    quot  gt  lt  div gt   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        amp  active         box-shadow  rgba 0  0  0  0 3  0 1px 4px -1px             Hope this helps

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

Examples related to css