How to Apply Box-Shadow on All Four Sides

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

CSS box-shadow on all four sides

If you set the offsets to zero, the shadow will be equal on all four sides.

.contactBackground{
    background-color:#FFF;
    padding:20px;
    box-shadow: 0 0 10px #000000;
}

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>

How to put a shadow in all four sides of an image?

This will give you shadow on all 4 sides:

div.shadow {
    -moz-box-shadow: 0px 0px 10px #000;
    -webkit-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
}

JSFiddle

The first two 0px's mean that the shadow won't explicitly protrude either left/right or up/down. The 10px gives it enough blur to protrude out all edges. The #000 is the color of the shadow. You can play around with it to get the look you like.

CSS: box-shadow on four sides with blur effect

If you have googled this a bit more, you would have found the answer right away.

The box-shadow property syntax is the fallowing :

box-shadow : horizontal offset | vertical offset | blur | spread | color ;

So you want it on all sides means :

1. No offsets.
2. Blur as you like.

Spread here is key to this, setting 10px to the spread means 5px on all sides, basically, half the amount will be on each facing side.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  padding: 30px;
  margin: 30px;
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: orange;
  box-shadow: 0px 0px 10px 10px grey;
}

<div></div>

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/

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

CSS Shadows all four sides of div

As Ventus said is not possible to use css shadows with ie (only ie9). But you can use shadowOn. It's a great jquery plugin and very easy in use. With it you will have cross browser compatibility.

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>

Add CSS box shadow around the whole DIV

You're offsetting the shadow, so to get it to uniformly surround the box, don't offset it:

-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;

---

Related Topics