html - Box-shadow only on right and left -

i need make box-shadow on right , left of element. should fade , thinner top , bottom. shouldn't oveflow on top , bottom.

the main issue can't prevent shadow overflow on top , bottom of element.

this have :

html :

<div></div> 

css :

div{     box-shadow: 0px 0px 20px 0px #000000; } 

you need use 2 box-shadows 1 left shadow , 1 right one. need specify both box-shadows in same box-shadow attribute , seperate them coma :

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

both need have negative spread value shorter divs height , don't overflow on top , bottom.

demo

output :

you need tweak values of shadow in order adapt size of element want use on.

html :

<div></div> 

css :

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