CODEWITHSUNDEEP
css
L84
L84

Reputation: 46308

Box-Shadow Only on Left and Right

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

Upvotes: 6

Views: 28181

Answers (1)

Antony
Antony

Reputation: 15106

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.

Upvotes: 14

Related Questions