CSS box-shadow on all four sides

Question

I have this class here and I using box-shadow which works fine, but it only shows the shadow on 2 sides, is there away to get the shadow on all four sides?

Thanks, J

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

Answer 1

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

Answer 2

Box-Shadow

CSS3 box-shadow property has following attributes: (W3Schools)

box-shadow: h-shadow v-shadow blur spread color inset;

In your example you're offsetting shadow by 10px vertically and horizontally.

Like in other comments set first two values to 0px in order to have even shadow on all sides.

More on Shadows

The main prefix for shadow to support latest browsers is box-shadow.

There are 2 other ones that I recommend to use for older Mozilla and Webkit:

• -moz-box-shadow
• -webkit-box-shadow

Also, by using rgba instead of hex color value you can set the alpha/opacity of the shadow: box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.3);

Answer 3

Remove the offset definitions, and use only the blur radius (the third argument):

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