How to apply box-shadow on all four sides?

Question

I\'m trying to apply a box-shadow on all four sides. I could only get it on 2 sides:

Answer 1

Understand box-shadow syntax and write it accordingly

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

h-offset: Horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box - Required

v-offset: Vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box - Required

blur: Blur radius (The higher the number, the more blurred the shadow will be) - Optional

color: Color of the shadow - Optional

spread: Spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow - Optional

inset: Changes the shadow from an outer shadow to an inner shadow - Optional

box-shadow: 0 0 10px #999;

box-shadow works better with spread

box-shadow: 0 0 10px 8px #999;

use 'inset' to apply shadow inside of the box

box-shadow: 0 0 8px inset #999;
(or)
box-shadow: 0 0 8px 8px inset #999;

use rgba (red green blue alpha) to adjust the shadow more efficiently

box-shadow: 0 0 8px inset rgba(153, 153, 153, 0.8); 
(or)
box-shadow: 0 0 8px 8px inset rgba(153, 153, 153, 0.8);