CSS Box Shadow - Top and Bottom Only

Question

I cannot find any examples of how to do this  but how can I add a box shadow only to the top and bottom of an element

User · Accepted Answer

As Kristian has pointed out  good control over z-values will often solve your problems  If that does not work you can take a look at CSS Box Shadow Bottom Only on using overflow hidden to hide excess shadow  I would also have in mind that the box-shadow property can accept a comma-separated list of shadows like this  box-shadow  0px 10px 5px  888  0px -10px 5px  888   This will give you some control over the  quot amount quot  of shadow in each direction  Have a look at http   www css3 info preview box-shadow  for more information about box-shadow  Hope this was what you were looking for

User · Answer

essentially the shadow is the box shape just offset behind the actual box  in order to hide portions of the shadow  you need to create additional divs and set their z-index above the shadowed box so that the shadow is not visible   If you d like to have extremely specific control over your shadows  build them as images and created container divs with the right amount of padding and margins   then use the png fix to make sure the shadows render properly in all browsers

User · Answer

So this is my first answer here  and because I needed something similar I did with pseudo elements for 2 inner shadows  and an extra DIV for an upper outer shadow  Don t know if this is the best solutions but maybe it will help someone   HTML   lt div class  shadow-block  gt       lt div class  shadow  gt  lt  div gt       lt div class  overlay  gt           lt div class  overlay-inner  gt              content here          lt  div gt       lt  div gt   lt  div gt    CSS   overlay       background   f7f7f4      height  185px      overflow  hidden      position  relative      width  100        overlay before       border-radius  50  50  50  50       box-shadow  0 0 50px 2px rgba 1  1  1  0 6       content           display  block      margin  0 auto      width  80       overlay after       border-radius  50  50  50  50       box-shadow  0 0 70px 5px rgba 1  1  1  0 5       content   -       display  block      margin  0 auto      position  absolute      bottom  -65px      left  -50       right  -50       width  80       shadow       position  relative      width 100       height 8px      margin  0 0 -22px 0      -webkit-box-shadow  0px 0px 50px 3px rgba 1  1  1  0 6       box-shadow  0px 0px 50px 3px rgba 1  1  1  0 6       border-radius  50

User · Answer

I ve played around with it and I think I have a solution   The following example shows how to set Box-Shadow so that it will only show a shadow for the inset top and bottom of an element     Legend  insetOption leftPosition topPosition blurStrength spreadStrength color  Description The key to accomplishing this is to set the blur value to  lt   the negative of the spread value  ex  inset 0px 5px - px 5px  000  the blur value should be -5 and lower  and to also keep the blur value   0 when subtracted from the primary positioning value  ex  using the example from above  the blur value should be -9 and up  thus giving us an optimal value for the the blur to be between -5 and -9    Solution     styleName         for IE 8 and lower    background-color  888  filter  progid DXImageTransform Microsoft dropShadow color  FFFFCC  offX 0  offY 0  positive true         for IE 9     box-shadow  inset 0px 2px -2px 2px rgba 255 255 204 0 7   inset 0px -2px -2px 2px rgba 255 255 204 0 7        for webkit browsers     -webkit-box-shadow  inset 0px 2px -2px 2px rgba 255 255 204 0 7   inset 0px -2px -2px 2px rgba 255 255 204 0 7        for firefox 3 6     -moz-box-shadow  inset 0px 2px -2px 2px rgba 255 255 204 0 7   inset 0px -2px -2px 2px rgba 255 255 204 0 7

User · Answer

After some experimentation I found that a fourth value in the line controls the spread  at least in FF 10   I opposed the vertical offsets and gave them a negative spread   Here s the working pen  http   codepen io gillytech pen dlbsx    lt html gt   lt head gt   lt style type  text css  gt    test       width  500px      border  1px   CCC solid      height  200px       box-shadow           inset 0px 11px 8px -10px  CCC          inset 0px -11px 8px -10px  CCC      lt  style gt   lt  head gt   lt body gt       lt div id  test  gt  lt  div gt   lt  body gt   lt  html gt    This works perfectly for me

[css] CSS Box Shadow - Top and Bottom Only

Examples related to css