How to create a inset box-shadow only on one side

Question

Is it possible to somehow only have inset box-shadow on one side of a div   Note that I m talking about an inset box-shadow here  not the normal outer box-shadow   For example  in the following JSFiddle  you ll see that the inset shadow appears on all 4 sides  in varying degrees   How do I get it to ONLY show at the top   Or at most ONLY at top and bottom    JSFiddle  http   jsfiddle net ahmadka KFrun    x000D   x000D   box   x000D    -webkit-box-shadow  inset 0px 5px 10px 1px  000000  x000D    box-shadow  inset 0px 5px 10px 1px  000000  x000D    x000D   x000D   text   x000D    padding  20px  x000D    x000D   lt div class  box  gt  x000D     lt div class  text  gt  x000D      Lorem ipsum      x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This is what you are looking for  It has examples for each side you want with a shadow   top-box       box-shadow  inset 0 7px 9px -7px rgba 0 0 0 0 4      left-box       box-shadow  inset 7px 0 9px -7px rgba 0 0 0 0 4      right-box       box-shadow  inset -7px 0 9px -7px rgba 0 0 0 0 4      bottom-box       box-shadow  inset 0 -7px 9px -7px rgba 0 0 0 0 4      See the snippet for more examples   x000D   x000D  body       background-color  0074D9    div       background-color  ffffff      padding 20px      margin-top 10px     top-box       box-shadow  inset 0 7px 9px -7px rgba 0 0 0 0 7      left-box       box-shadow  inset 7px 0 9px -7px rgba 0 0 0 0 7      right-box       box-shadow  inset -7px 0 9px -7px rgba 0 0 0 0 7      bottom-box       box-shadow  inset 0 -7px 9px -7px rgba 0 0 0 0 7      top-gradient-box       background  linear-gradient to bottom   999 0   ffffff 7px   ffffff 100       left-gradient-box       background  linear-gradient to right   999 0   ffffff 7px   ffffff 100       right-gradient-box       background  linear-gradient to left   999 0   ffffff 7px   ffffff 100       bottom-gradient-box       background  linear-gradient to top   999 0   ffffff 7px   ffffff 100      x000D   lt div class  top-box  gt          This area has a top shadow using box-shadow  lt  div gt    lt div class  left-box  gt          This area has a left shadow using box-shadow  lt  div gt    lt div class  right-box  gt          This area has a right shadow using box-shadow  lt  div gt    lt div class  bottom-box  gt          This area has a bottom shadow using box-shadow  lt  div gt    lt div class  top-gradient-box  gt          This area has a top shadow using gradients  lt  div gt   lt div class  left-gradient-box  gt          This area has a left shadow using gradients  lt  div gt   lt div class  right-gradient-box  gt          This area has a right shadow using gradients  lt  div gt   lt div class  bottom-gradient-box  gt          This area has a bottom shadow using gradients  lt  div gt  x000D   x000D   x000D

User · Answer

The trick is a second  box-inner inside  which is larger in width than the original  box  and the box-shadow is applied to that   Then  added more padding to the  text to make up for the added width   This is how the logic looks     And here s how it s done in CSS   Use max width for  inner-box to not cause  box to get wider  and overflow to make sure the remaining is clipped    box       max-width  100   important      overflow  hidden      110  is wider than the parent which is 100  in a child s context  should be the same when the parent  box has a fixed width  for example       Negative margins make up for the width and cause the element to be centered  instead of only the right part hiding     box-inner       width  110       margin-left -5       margin-right  -5       -webkit-box-shadow  inset 0px 5px 10px 1px  000000      box-shadow  inset 0px 5px 10px 1px  000000      And add some padding on the X axis to make up for the wider  inner-box    text       padding  20px 40px      Here s a working Fiddle   If you inspect the Fiddle  you ll see

User · Answer

Literally you can t do such a thing  but you should try this CSS trick  box-shadow  inset 0 3vw 6vw rgba 0 0 0 0 6   inset 0 -3vw 6vw rgba 0 0 0 0 6

User · Answer

This comes a little close    box       -webkit-box-shadow  inset -1px 10px 5px -3px  000000      box-shadow  inset -1px 10px 5px -3px  000000

User · Answer

try it  maybe useful     box-shadow  0 0 0 3px rgb 255 255 255   0 7px 3px  cbc9c9                      -webkit-box-shadow  0 0 0 3px rgb 255 255 255   0 7px 5px  cbc9c9                      -o-box-shadow  0 0 0 3px rgb 255 255 255   0 7px 5px  cbc9c9                      -moz-box-shadow  0 0 0 3px rgb 255 255 255   0 7px 5px  cbc9c9      above CSS cause you have a box shadow in bottom  you can red more Here

User · Answer

Quite a bit late  but a duplicate answer that doesn t require altering the padding or adding extra divs can be found here  Have an issue with box-shadow Inset bottom only   It says   Use a negative value for the fourth length which defines the spread distance  This is often overlooked  but supported by all major browsers   From the answerer s fiddle   box-shadow  inset 0 -10px 10px -10px  000000

User · Answer

This might not be the exact thing you are looking for  but you can create a very similar effect by using rgba in combination with linear-gradient     background  linear-gradient rgba 0 0 0  5  0   rgba 0 0 0 0  30      This creates a linear-gradient from black with 50  opacity  rgba 0 0 0  5   to transparent  rgba 0 0 0 0   which starts being competently transparent 30  from the top  You can play with those values to create your desired effect  You can have it on a different side by adding a deg-value  linear-gradient 90deg  rgba 0 0 0  5  0   rgba 0 0 0 0  30    or switching the colors around  If you want really complex shadows like different angles on different sides you could even start layering linear-gradient   Here is a snippet to see it in action    x000D   x000D   box   x000D    background  linear-gradient rgba 0 0 0  5  0   rgba 0 0 0 0  30    x000D    x000D   x000D   text   x000D    padding  20px  x000D    x000D   lt div class  box  gt  x000D     lt div class  text  gt  x000D      Lorem ipsum      x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Inset Box Shadow only on Top side    box               background   CCC              -webkit-box-shadow  inset 0 20px 20px -20px rgba 0 0 0 0 8               -moz-box-shadow  inset 0 20px 20px -20px rgba 0 0 0 0 8               box-shadow  inset 0 20px 20px -20px rgba 0 0 0 0 8               font  bold 18px 1 2em sans-serif              height  auto              margin  15px auto              padding  75px 15px 25px              text-align  center              width  80

[css] How to create a inset box-shadow only on one side?

Examples related to css