Box shadow

Box shadow is one of the CSS3 properties. It enables the browsers to add a shadow over any box.

box-shadow: 2px 2px 5px 3px #000;
box-shadow: 1px 1px 3px 6px rgba(0,0,0,0.5);

Above code represent a box shadow where,

box-shadow: left top blue spread color;
box-shadow: left top blue spread rgba(r,g,b,opacity);

Box shadow only on top and bottom

Its a simple tricks I can show you to add a shadow only on top and bottom.
box shadow top bottom

.box-shadow-top-bottom {

    box-shadow: 0  12px 12px -12px #696868 inset, 
                0 -12px 12px -12px #696868 inset;
}

Leave a Reply

Your email address will not be published. Required fields are marked *