How can I add a box-shadow on one side of an element

Question

I need to create a box-shadow on some block element  but only  for example  on its right side  The way I do it is to wrap the inner element with box-shadow into an outer one with padding-right and overflow hidden  so the three other sides of the shadow are not visible   Is there some better way to achieve this  Like box-shadow-right   EDIT  My intentions are to create only the vertical part of the shadow  Exactly the same as what repeat-y of the rule background url shadow png  100  0  repeat-y would do

User · Accepted Answer

Yes  you can use the shadow spread property of the box-shadow rule     x000D   x000D   myDiv x000D    x000D    border  1px solid  333  x000D    width  100px  x000D    height  100px  x000D    box-shadow  10px 0 5px -2px  888  x000D    x000D   lt div class  myDiv  gt  lt  div gt  x000D   x000D   x000D    The fourth property there -2px is the shadow spread  you can use it to change the spread of the shadow  making it appear that the shadow is on one side only    This also uses the shadow positioning rules 10px sends it to the right  horizontal offset  and 0px keeps it under the element  vertical offset     5px is the blur radius     Example for you here

User · Answer

Here is my example    x000D   x000D   box  x000D           x000D          width  400px   x000D          height  80px   x000D          background-color   C9C   x000D          text-align  center   x000D          font  20px normal Arial  Helvetica  sans-serif   x000D          color   fff   x000D          padding  100px 0 0 0  x000D          -webkit-box-shadow  0 8px 6px -6px black  x000D             -moz-box-shadow  0 8px 6px -6px black  x000D                  box-shadow  0 8px 6px -6px black  x000D        x000D   lt div class  box  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here is a codepen to demonstrate  for each side  or a working snippet    x000D   x000D   boxes   x000D    display  flex  x000D    flex-wrap  wrap  x000D    x000D   x000D   box   x000D    margin  20px  x000D    border  1px solid  ccc  x000D    font-family  Helvetica Neue  Arial  sans-serif  x000D    font-weight  100  x000D    letter-spacing  2px  x000D    color   999  x000D    display  flex  x000D    align-items  center  x000D    justify-content  center  x000D    text-align  center  x000D    flex  1  x000D    padding  40px  x000D    line-height  1 4em  x000D    x000D   x000D   top   x000D    box-shadow  0 -5px 5px -5px  333  x000D    x000D   x000D   right   x000D    box-shadow  5px 0 5px -5px  333  x000D    x000D   x000D   bottom   x000D    box-shadow  0 5px 5px -5px  333  x000D    x000D   x000D   left   x000D    box-shadow  -5px 0 5px -5px  333  x000D    x000D   lt div class  boxes  gt  x000D     lt div class  box top  gt Top Only lt  div gt  x000D     lt div class  box right  gt Right Only lt  div gt  x000D     lt div class  box bottom  gt Bottom Only lt  div gt  x000D     lt div class  box left  gt Left Only lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

clip-path is now  2020  one of simplest ways to achieve box-shadows on specific sides of elements  especially when the required effect is a  clean cut  shadow at particular edges  which I believe was what the OP was originally looking for    like this    x000D   x000D   shadow-element   x000D      border  1px solid  333  x000D      width  100px  x000D      height  100px  x000D      box-shadow  0 0 15px rgba 0 0 0 0 75   x000D      clip-path  inset 0px -15px 0px 0px   x000D    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   x000D      border  1px solid  333  x000D      width  100px  x000D      height  100px  x000D      box-shadow  15px 0px 15px -10px rgba 0 0 0 0 75   x000D    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  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 box-shadow blur radius - Xpx  to any edges where the shadow should be displayed

User · Answer

This site helped me  https   gist github com ocean90 1268328  Note that on that site the left and right are reversed as of the date of this post    but they work as expected   They are corrected in the code below    lt  DOCTYPE html gt   lt html gt       lt head gt           lt title gt Box Shadow lt  title gt            lt style gt               box                   height  150px                  width  300px                  margin  20px                  border  1px solid  ccc                              top                   box-shadow  0 -5px 5px -5px  333                              right                   box-shadow  5px 0 5px -5px  333                              bottom                   box-shadow  0 5px 5px -5px  333                              left                   box-shadow  -5px 0 5px -5px  333                              all                   box-shadow  0 0 5px  333                         lt  style gt       lt  head gt       lt body gt           lt div class  box top  gt  lt  div gt           lt div class  box right  gt  lt  div gt           lt div class  box bottom  gt  lt  div gt           lt div class  box left  gt  lt  div gt           lt div class  box all  gt  lt  div gt       lt  body gt   lt  html gt

User · Answer

Ok  here is one try more  Using pseudo elements and aplying the shadow-box porperty over them   html    lt div class  no-relevant-box  gt     lt div class  div-to-shadow-1  gt  lt  div gt     lt div class  div-to-shadow-2  gt  lt  div gt   lt  div gt    sass    div-to-shadow-1   div-to-shadow-2   height  150px   width  150px   overflow  hidden   transition  all 0 3s ease-in-out    amp   after     display  block     content         position  relative     top  0     left  100      height  100      width  10px     border  1px solid mediumeagreen     box-shadow   0px 7px 12px rgba 0 0 0 0 3     amp  hover     border  1px solid dodgerblue     overflow  visible   https   codepen io alex3o0 pen PrMyNQ

User · Answer

To get the clipped effect on up to two sides you can use pseudo elements with background gradients   header  before  main  before  footer  before  header  after  main  after  footer  after       display     block      content             position    absolute      width       8px      height      100       top         0px     header  before  main  before  footer  before       left        -8px      background  linear-gradient to left  rgba 0  0  0  0 6   rgba 0  0  0  0       header  after  main  after  footer  after       right       -8px      background  linear-gradient to right  rgba 0  0  0  0 6   rgba 0  0  0  0        will add a nice shadow-like effect to the left and right of the elements that normally make up a document

User · Answer

Just use   after or   before pseudo element to add the shadow  Make it 1px and position it on whatever side you want  Below is example of top    x000D   x000D  footer   x000D     margin-top  50px  x000D     color   fff  x000D     background-color   009eff  x000D     text-align  center  x000D     line-height  90px  x000D     position  relative  x000D    x000D   x000D  footer  after   x000D      content      x000D      position  absolute  x000D      width  100   x000D      height  1px  x000D      top  0  x000D      left  0  x000D      z-index  -1  x000D      box-shadow  0px 0px 10px 1px rgba 0  0  0  0 75   x000D    x000D   lt footer gt top only box shadow lt  footer gt  x000D   x000D   x000D

User · Answer

My self-made solution which is easy to edit   HTML      lt div id  anti-shadow-div  gt       lt div id  shadow-div  gt  lt  div gt   lt  div gt     css      shadow-div      margin-right 20px     Set to 0 if you don t want shadow at the right side        margin-left 0px     Set to 20px if you want shadow at the left side        margin-top 0px     Set to 20px if you want shadow at the top side        margin-bottom 0px     Set to 20px if you want shadow at the bottom side        box-shadow  0px 0px 20px black       height 100px      width 100px      background  red      anti-shadow-div      margin 20px      display table      overflow hidden       Demo  http   jsfiddle net jDyQt 103

User · Answer

What I do is create a vertical block for the shadow  and place it next to where my block element should be  The two blocks are then wrapped into another block    lt div id  wrapper  gt       lt div id  shadow  gt  lt  div gt         lt div id  content  gt CONTENT lt  div gt     lt  div gt    lt style gt   div wrapper     width 200px    height 258px           div wrapper  gt  div shadow     display inline-block    width 1px    height 100     box-shadow  -3px 0px 5px 0px rgba 0 0 0 0 8     div wrapper  gt  div content     display inline-block    height 100     vertical-align top      lt  style gt    jsFiddle example here

User · Answer

This could be a simple way  border-right   1px solid  ddd  height 85px      box-shadow   10px 0px 5px 1px  eaeaea    Assign this to any div

User · Answer

div    border  1px solid  666      width  50px      height  50px      -webkit-box-shadow  inset 10px 0px 5px -1px  888

User · Answer

Here s a little hack that I did    lt div id  element  gt  lt  --element that I want an one-sided inset shadow from the bottom-- gt  lt  div gt    lt div class  one side shadow  gt  lt  div gt    1  Create a  lt div class  one side shadow  gt  lt  div gt  right below the element that I want to create the one-side box shadow  in this case I want a one-sided inset shadow for id  element  coming from the bottom   2  Then I created a regular box-shadow using a negative vertical offset to push the shadow upwards to one-side     box-shadow  0 -8px 20px 2px  DEDEE3

[css] How can I add a box-shadow on one side of an element?

Examples related to css

Examples related to shadow

Examples related to box-shadow