Creating a CSS3 Box-Shadow on All Sides But One

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 */
}

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>

How to apply box-shadow on all four sides?

It's because of x and y offset. Try this:

-webkit-box-shadow: 0 0 10px #fff;
        box-shadow: 0 0 10px #fff;

edit (year later..): Made the answer more cross-browser, as requested in comments :)

btw: there are many css3 generator nowadays..
css3.me, css3maker, css3generator etc...

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

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.

Can CSS3 box-shadow:inset do only one or two sides? like border-top?

This is what worked for me:

box-shadow: inset 1px 4px 9px -6px;

Example: http://jsfiddle.net/23Egu/

How do I set an equal box-shadow for all 4 sides?

The applicable syntax for the box-shadow property is:

/* inset | offset-x | offset-y | blur-radius | spread-radius | color */

This is not to be confused with the shorthand syntax for certain box-model properties (e.g. margin or padding) which is:

/* top | right | bottom | left */

To achieve an evenly placed border, offset-x and offset-y should be 0:

.example {
  border-radius: 3vw;
  box-shadow: inset 0 0 10px 10px rgb(0 0 0);
  text-align: center;
  padding: 5vw;
}

<div class="example">Text</div>

CSS Box Shadow Bottom Only

Do this:

box-shadow: 0 4px 2px -2px gray;

It's actually much simpler, whatever you set the blur to (3rd value), set the spread (4th value) to the negative of it.

Creating a CSS3 Box-Shadow on All Sides But One