CSS Box-Shadow on Three Sides of a Div

CSS box-shadow on three sides of a div?

Here's a JS Fiddle for you, it only uses one single div to work.

#shadowBox {
    background-color: #ddd;
    margin: 0px auto;
    padding: 10px;
    width: 220px;
    box-shadow: 0px 8px 10px gray, 
        -10px 8px 15px gray, 10px 8px 15px gray;
}

You set a shadow on the bottom, bottom left, and bottom right. With soft shadows it gets a bit tricky but it is doable. It just needs a bit of guesswork to decrease the middle shadow's blur radius, so that it looks seamless and not too dark when it overlaps with the side shadows.

How to apply box-shadow only on 3 sides?

You can always do something like:

.shadow-box {

  background-color: #ddd;

  margin: 0px auto;

  padding: 10px;

  width: 220px;

  box-shadow: 0px 8px 10px gray, 

    -10px 8px 15px gray, 10px 8px 15px gray;

 }

<div class="shadow-box">Box with shadows</div>

Box-Shadow on 3 sides of a div (not on the right side)

HTML

<br/><br/>
<div id="shadowBox">Test</div>

CSS: Top/Left/Bottom

  #shadowBox {
      background-color: #ddd;
      margin: 0px auto;
      padding: 10px;
      width: 220px;
      box-shadow: -10px -10px 10px gray, 
          -10px 0px 10px gray, -10px 10px 10px gray;
  }

Box-shadow on 3 of four sides of div

You can't have it render on only three sides, as it's really a big blurry block behind the element itself. The best way I've found to fake it is simply by moving it further down the Y-axis and tweaking values until it looks good.

You could also experiment with ::before and ::after and try making a 2/3-height pseudo-element that carries the box-shadow, but again, it's a hack, and it'll require tweaking to look good.

Box Shadow on only 3 sides

You can use the ::before pseudo-element to block out one side of the box shadow. It's not perfect, but it might be enough for your situation. Here's the updated jsFiddle.

#bulb-bottom:before {
    background-color: #E5F7A3;
    content: '';
    display: block;
    height: 30px;
    margin: 0 auto;
    position: relative;
    top: -10px;
    width: 140px;
}​

One pixel shadow on three sides using CSS3 box-shadow

Try 3 shadows, no blur. http://jsfiddle.net/leaverou/8tgAp/1/

body {
  width: 300px;
  height: 200px;
  margin: 20px auto;

  -moz-box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
  -webkit-box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
  box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
}

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/

css filter on three sides of element

Consider a clip-path that will clip only the top part then you can use a basic box-shadow (or a drop-shadow)

.story {
  width: 50vw;
  margin: 0 auto;
  height: 50vh;
  background: orange;
  border-radius: 0 0 14px 14px;
  box-shadow:0px 3px 5px 3px rgba(0, 0, 0, 0.5);
  clip-path:polygon(-50px 0,calc(100% + 50px) 0,calc(100% + 50px) calc(100% + 50px),-50px calc(100% + 50px))
}

<div class='story'></div>

Creating a CSS3 box-shadow on all sides but one

In your sample create a div inside #content with this style

#content_over_shadow {
    padding: 1em;
    position: relative; /* look at this */
    background:#fff;    /* a solid background (non transparent) */
}

and change #content style (remove paddings) and add shadow

#content {
    font-size: 1.8em;
    box-shadow: 0 0 8px 2px #888; /* line shadow */
}

add shadows to tabs:

#nav li a {
    margin-left: 20px;
    padding: .7em .5em .5em .5em;
    font-size: 1.3em;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    box-shadow: 0 0 8px 2px #888; /* the shadow */
}

---

Related Topics