Box shadow only on the right and left

Question

I need to make a shadow only to the right and left of the element. It should disappear and become thinner above and below. It also should not pass from above and below.

The main problem is that I cannot prevent the shadow overflow from above and below the element.

This is what I have:

HTML:

<div></div> 

CSS:

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

Answer 1

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

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

Both must have a negative propagation value, so they are shorter than the height of the divs and do not overflow from the top and bottom.

Demo

output:

You will need to adjust the shadow values ​​to adapt them to the size of the element that you want to use.

HTML:

 <div></div> 

CSS:

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

Answer 2

You will need to use images for your shadow. I mean, there should be two images in the left and right “shadows”, which can then be placed on the edges of your div to create an effect. Obviously, I have not tested this, and it may take a little tweaking, but you will need to do something like this:

 <style> .weird-image{ height: 100px; width:100px; position: relative; /* do this so the absolutely positiond imgs are relative to this container */ } .weird-image-left-shadow{ position: absolute; /*positioned relative to .weird-image*/ top: 0px; /*align img with top of div*/ left:-15px; /* some negative value so that the shadow goes on the outside of div*/ } .weird-image-right-shadow{ position: absolute; /*positioned relative to .weird-image*/ top: 0px; /*align img with top of div*/ right:-15px; /* some negative value so that the shadow goes on the outside of div*/ } </style> <div class="weird-image"> <img class="weird-image-left-shadow" src="left-shadow.png"/> <img class="weird-image-right-shadow" src="right-shadow.png" /> <p>My Actual Div Content</p> </div> 

Answer 3

Use margin to show shadow

 div {margin:10px} 

Look at this

http://jsfiddle.net/nB5F6/4/