6

I am attempting to create an inset box-shadow on an element that only has the shadow on the left and right. I cannot get it to work.

Here is the box-shadow I tried: 

 box-shadow: inset 10px 0px 25px 0px rgba(0,0,0,0.45);

I will add another one for the right side. The problem is this setting also shows the shadow slightly on the top and bottom and I cannot get it to not show and still show a shadow on the left side. Is this possible?

jsFiddle

L84
  • 45,514
  • 58
  • 177
  • 257
  • 1
    Did you check near around `div`s or `elements` properties? Share the `jsfiddle` link. – Mohit Bhansali Jul 02 '13 at 03:21
  • I guess this is how **box** shadow means; maybe you can use `::before` pseudo element to drop the shadow instead. – Passerby Jul 02 '13 at 03:22
  • Duplicate: http://stackoverflow.com/questions/11997032/how-to-get-box-shadow-on-left-right-sides-only –  Jul 02 '13 at 03:24
  • @Lynda How about this: http://jsfiddle.net/C2LYF/1/ ? Notice that I changed your shadow color to `black` to better demonstrate, as the screen I'm using right now is crappy. – Passerby Jul 02 '13 at 03:43

1 Answers1

13

Use a negative value on spread-radius (4th value) to shrink the shadow. This can hide the unwanted top and bottom shadow.

box-shadow: inset 25px 0px 25px -25px rgba(0,0,0,0.45), inset -25px 0px 25px -25px rgba(0,0,0,0.45);

See DEMO.

Antony
  • 14,900
  • 10
  • 46
  • 74