How to add box-shadow in CSS

Box- shadow property is a Cascading style sheet property which helps to cast shadow for an element.

When you draw an image you shade the shadow with a pencil. When you work in code, you apply an inner or outer shadow to the element with box-shadow property. You can find the below picture of pencil shade and cascading style sheet method of implementation. 

Looks cool nah!

Read How to fix header even though page scrolls

Box shadow property syntax:

Box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

The following are the values accepted by the property.

Horizontal offset (offset-x):

As the name suggest horizontal offset sets shadow to left and right side of the element. Positive value means shadow is set to right side of the box and negative to the other side.

Vertical offset (offset-y):

Positive value means shadow is set to bottom side of the box and the negative value means shadow is set to top of the box.

Blur radius:

If the value is 0 or not specified, the shadow edge is sharp. The larger the value blur effect of the shadow is more.

Spread radius:

Spread radius is the value which affects the thickness of the shadow. If the value is more shadow grows bigger and expands. If the value is negative shadow will shrink. Color: It applies color to the shadow. If not takes the value of the browser.

Inset:

Box shadow when applied will be a drop shadow and when inset is applied shadow will appear inside the frame. 

The below examples will help in understanding the property better

a)      With both offset values as positive

               .box-shadow-one{
                    box-shadow: 5px 5px rgba(0,0,0,0.4);
                }

b) With both offset value as negative

                .box-shadow-two{
                      box-shadow:-5px -5px rgba(0,0,0,0.4);
                }

c) With offset-x taking negative value

                .box-shadow-three{
                      box-shadow:-5px 5px rgba(0,0,0,0.4);
                }

d) With offset-y taking negative value

                .box-shadow-four{
                      box-shadow:5px -5px rgba(0,0,0,0.4);
                }

e) With blur radius applied

                .box-shadow-five{
                      box-shadow:5px 3px 2px rgba(0,0,0,0.4);
                }

f) With spread radius applied

                .box-shadow-six{
                      box-shadow:5px 3px 2px 5px rgba(0,0,0,0.4);
                }

g) With inset applied

                .box-shadow-seven{
                      box-shadow:5px 3px 2px 5px rgba(0,0,0,0.4) inset;
                }

ReadCSS selectors