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'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>

Answer 2

Use margin to show the shadow

div {margin:10px}

Look at this

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

Answer 3

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 4

I think the most elegant semantical way must be to wrap that element inside a div, with overflow-y: hidden; and padding: 0 [horizontal-spread-box-shadow]. Here is the exaggerated example:

body {
  padding: 50px;
}

.parent {
  display: inline-block;
  border: 2px solid red;
  overflow-y: hidden;
  padding: 0 40px;
}

.children {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 40px #000;
  background: blue;
}

<div class="parent">
  <div class="children"></div>
</div>