CSS shadow on all four sides

Question

I have this class here and I use box-shadow, which works fine, but it shows only the shadow on both sides, is there any way 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

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

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

In your example, you shift the shadow by 10 pixels vertically and horizontally.

As in other comments, set the first two values ​​to 0px to have even a shadow on all sides.

More on Shadows

The main prefix for supporting the latest browsers is box-shadow .

There are 2 others that I recommend using for older Mozilla and Webkit:

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

In addition, using rgba instead of the 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

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

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

Answer 4

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

Answer 5

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

Right, Bottom, Left, Top

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