css - Box-Shadow Only on Left and Right

Question

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

Answer 1

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.