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.

The main issue is that I can't prevent the shadow to overflow on the top and bottom of 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 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 :

<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're going to need to go to use images for your shadow. What I mean is, the left and right 'shadows' are going to need to be two images that you can then position on the edges of your div to create the effect. Obviously I didn't test this and it might need a little tweaking, but you'll 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>