Box-shadow only on right and left

Question

I need to make a box-shadow only on the right and left of an element. It should fade and get thinner to the top and bottom. It also shouldn\'t oveflow on top and bottom.

Answer 1

You will need to use two box-shadows one for the left shadow and one for the right one. You need to specify both box-shadows in the same box-shadow attribute and seperate them with a coma :

box-shadow: -60px 0px 100px -90px #000000, 60px 0px 100px -90px #000000;

Both need to have a negative spread value so they are shorter than the divs height and don't overflow on the top and bottom.

DEMO

output :

You will need to tweak the values of the shadow in order to adapt it to the size of the element you want to use it on.

HTML :

CSS :

div{
    height:500px;
    width:300px;
    margin:0 auto;
    box-shadow: -60px 0px 100px -90px #000000, 60px 0px 100px -90px #000000;
}