CODEWITHSUNDEEP
css
user1269625
user1269625

Reputation: 3209

CSS box-shadow on all four sides

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

Upvotes: 7

Views: 34673

Answers (5)

Kevin Boucher
Kevin Boucher

Reputation: 16675

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

Upvotes: 14

Xarcell
Xarcell

Reputation: 2011

Try: box-shadow: 0 0 10px 10px #000000;

Upvotes: 1

Kirill
Kirill

Reputation: 178

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

Upvotes: 9

Gene Parmesan
Gene Parmesan

Reputation: 102

you need to specify box-shadow: 10px 10px 10px 10px BLACK;

Right, Bottom, Left, Top

or you could say box-shadow-top: 10px BLACK; etc

Upvotes: -1

BenM
BenM

Reputation: 53198

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

Upvotes: 2

Related Questions