How to get box-shadow on left right sides only

Question

Any way to get box-shadow on left  amp  right  horizontal   sides only with no hacks or images  I am using   box-shadow  0 0 15px 5px rgba 31  73  125  0 8     But it gives shadow all around   I have no borders around the elements

User · Answer

In some situations you can hide the shadow by another container  Eg  if there is a DIV above and below the DIV with the shadow  you can use position  relative  z-index  1  on the surrounding DIVs

User · Answer

NOTE  I suggest checking out  Hamish s answer below  it doesn t involve the imperfect  masking  in the solution described here      You can get close with multiple box-shadows  one for each side  box-shadow  12px 0 15px -4px rgba 31  73  125  0 8   -12px 0 8px -4px rgba 31  73  125  0 8     http   jsfiddle net YJDdp   Edit  Add 2 more box-shadows for the top and bottom up front to mask out the that bleeds through   box-shadow  0 9px 0px 0px white  0 -9px 0px 0px white  12px 0 15px -4px rgba 31  73  125  0 8   -12px 0 15px -4px rgba 31  73  125  0 8     http   jsfiddle net LE6Lz

User · Answer

DEMO  You must use the multiple box-shadow    Inset property make it look nice and inside  div       box-shadow  inset 0 12px  15px -4px rgba 31  73  125  0 8   inset 0 -12px  8px -4px rgba 31  73  125  0 8       width  100px      height  100px      margin  50px      background  white

User · Answer

This works fine for all browsers   -webkit-box-shadow  -7px 0px 10px 0px  000  7px 0px 10px 0px  000  -moz-box-shadow  -7px 0px 10px 0px  000  7px 0px 10px 0px  000  box-shadow  -7px 0px 10px 0px  000  7px 0px 10px 0px  000

User · Answer

NICE INSET SHADOW ON LEFT AND RIGHT SIDES FOR DIVS  IMAGES OR INNER CONTENTS  For a nice inset shadow in right and left sides on images  or any other content   use it this way      The z-index -1 does a nice trick when showing images or inner objects with insets   lt html gt   lt div class  shadowcontainer  gt   lt img src  https   www google es images srpr logo11w png  class  innercontent  style  with 100    gt   lt  div gt    lt style gt    shadowcontainer  display inline-flex  box-shadow  inset -40px 0px 30px -30px rgba 0 0 0 0 9  inset 40px 0px 30px -30px rgba 0 0 0 0 9       innercontent  z-index -1    lt  style gt   lt  html gt

User · Answer

For horizontal only  you can trick the box-shadow using overflow on its parent div    lt div class  parent  gt     lt div class  box-shadow  gt content lt  div gt   lt  div gt    parent    overflow hidden     box-shadow    box-shadow  box-shadow  0 5px 5px 0  000

User · Answer

box-shadow  0 5px 5px 0  000    It works on my side  Hope  it helps you

User · Answer

Classical approach  Negative spread  CSS box-shadow uses 4 parameters  h-shadow  v-shadow  blur  spread   box-shadow  10px 0 8px -8px black    The v-shadow  verical shadow  is set to 0   The blur parameter adds the gradient effect  but adds also a little shadow on vertical borders  the one we want to get rid of    Negative spread reduces the shadow on all borders  you can play with it trying to remove that little vertical shadow without affecting too much the one obn the sides  it s easier for small shadows  5 to 10px    Here a fiddle example     Second approach  Absolute div on the side  Add an empty div in your element  and style it with absolute positioning so it doesen t affect the element content   Here the fiddle with an example of left-shadow    lt div id  container  gt     lt div class  shadow  gt  lt  div gt   lt  div gt    shadow      position absolute      height  100       width  4px      left 0px      top 0px      box-shadow  -4px 0 3px black        Third  Masking shadow  If you have a fixed background  you can hide the side-shadow effect with two masking shadows having the same color of the background and blur   0  example   box-shadow       0 -6px white              Top Masking Shadow     0 6px white               Bottom Masking Shadow     7px 0 4px -3px black      Left-shadow     -7px 0 4px -3px black     Right-shadow   I ve added again a negative spread  -3px  to the black shadow  so it doesn t stretch beyond the corners   Here the fiddle

User · Answer

You can use 1 div inside that to  erase  the shadow    yourdiv      position relative      width 400px      height 400px      left 10px      top 40px      background-color white      box-shadow  0px 0px 1px 0 5px  5F5F5F      erase      position absolute      width 100       top 50       height 105       transform translate 0  -50        background-color white      You can play with  height     and  width     to erase what shadow you want

User · Answer

I tried to copy the bootstrap shadow-sm just in the right side  here is my code    shadow-rs      box-shadow  5px 0 5px -4px rgba 237  241  235  0 8

User · Answer

clip-path is now  2020  the best way I have found to achieve box-shadows on specific sides of elements  especially when the required effect is a  quot clean cut quot  shadow at particular edges  like this   x000D   x000D   shadow-element       width  100px      height  100px      background-color   FFC300      box-shadow  0 0 10px 5px rgba 0 0 0 0 75       clip-path  inset 0px -15px 0px -15px           position and left properties required to bring element out from edge of parent     so that shadow can be seen  margin-left would also achieve the same thing        position  relative      left  15px    x000D   lt div class  shadow-element  gt  lt  div gt  x000D   x000D   x000D      as opposed to an attenuated reduced thinning shadow like this   x000D   x000D   shadow-element       width  100px      height  100px      background-color   FFC300      box-shadow  15px 0 15px -10px rgba 0 0 0 0 75   -15px 0 15px -10px rgba 0 0 0 0 75           position and left properties required to bring element out from edge of parent     so that shadow can be seen  margin-left would also achieve the same thing        position  relative      left  15px    x000D   lt div class  shadow-element  gt  lt  div gt  x000D   x000D   x000D    Simply apply the following CSS to the element in question  box-shadow  0 0 Xpx Ypx  hex rgba      note 0 offset values    clip-path  inset Apx Bpx Cpx Dpx    Where   Apx sets the shadow visibility for the top edge Bpx right Cpx bottom Dpx left  Enter a value of 0 for any edges where the shadow should be hidden and a negative value  the same as the combined result of the blur radius   spread values - Xpx   Ypx  to any edges where the shadow should be displayed

User · Answer

Another idea could be creating a dark blurred pseudo element eventually with transparency to imitate shadow  Make it with slightly less height and more width i g

User · Answer

I wasn t satisfied with the rounded top and bottom to the shadow present in Deefour s solution so created my own  inset box-shadow creates a nice uniform shadow with the top and bottom cut off  To use this effect on the sides of your element  create two pseudo elements  before and  after positioned absolutely on the sides of the original element   x000D   x000D  div before  div after     content         height  100     position  absolute    top  0    width  15px    div before     box-shadow  -15px 0 15px -15px inset    left  -15px    div after     box-shadow  15px 0 15px -15px inset    right  -15px     div     background   EEEEEE    height  100px    margin  0 50px    width  100px    position  relative    x000D   lt div gt  lt  div gt  x000D   x000D   x000D    Edit Depending on your design  you may be able to use clip-path  as shown in  Luke s answer  However  note that in many cases this still results in the shadow tapering off at the top and bottom as you can see in this example   x000D   x000D  div     width  100px    height  100px    background   EEE    box-shadow  0 0 15px 0px  000    clip-path  inset 0px -15px 0px -15px     position  relative    margin  0 50px    x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

Try this  it s working for me       box-shadow  -5px 0 5px -5px  333  5px 0 5px -5px  333

User · Answer

Another way is with  overflow-y hidden on the parent with padding    wrap       overflow-y  hidden      padding  0 10px     wrap  gt  div       width  100px      height  100px      box-shadow  0 0 20px -5px red      http   jsfiddle net qqx221c8

[html] How to get box-shadow on left & right sides only

Examples related to html

Examples related to css