Css3 Box Shadow on Top, Left, and Right Only

CSS3 Box Shadow on Top, Left, and Right Only

It's better if you just cover the bottom part with another div and you will get consistent drop shadow across the board.

#servicesContainer {
  /*your css*/
  position: relative;
}

and it's fixed! like magic!

How to get box-shadow on left & right sides only

NOTE: I suggest checking out @Hamish's answer below; it doesn't involve the imperfect "masking" in the solution described here.

You can get close with multiple box-shadows; one for each side

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/YJDdp/

Edit

Add 2 more box-shadows for the top and bottom up front to mask out the that bleeds through.

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/LE6Lz/

How can I add a box-shadow on one side of an element?

Yes, you can use the shadow spread property of the box-shadow rule:

.myDiv

{

  border: 1px solid #333;

  width: 100px;

  height: 100px;

  box-shadow: 10px 0 5px -2px #888;

}

<div class="myDiv"></div>

Box shadow on top, bottom and left only

You are close to a solution. You just need to tweak the values a bit.

Here is a working example with your method, with some added emphasis so you can see the changes I made.

    box-shadow: inset 0 5px 0.5px 0.5px #000,
    inset 0 -5px 0.5px 0.5px #000,
    inset  5px 0.5px 0.5px #000;

https://jsfiddle.net/ercnvzj7/

I recommend this, for future shading: http://css3generator.com/

Box-Shadow Only on Left and Right

Use a negative value on spread-radius (4th value) to shrink the shadow. This can hide the unwanted top and bottom shadow.

box-shadow: inset 25px 0px 25px -25px rgba(0,0,0,0.45), inset -25px 0px 25px -25px rgba(0,0,0,0.45);

See DEMO.

css3 shadow box top and left + right for half height

One posibility, using a pseudo rotated with perspective and dimensioned to only half the height:

.test {

  width: 200px;

  height: 200px;

  margin: 10px;

  border: solid 1px red;

  position: relative;

  background-color: white;

}

.test:after {

  content: "";

  position: absolute;

  top: 0px;

  right: 0px;

  height: 50%;

  left: 0px;

  box-shadow: 0px 0px 15px 2px black;

  transform: perspective(400px) rotateX(-10deg);

  transform-origin: center top;

  z-index: -1;

}

<div class="test"></div>