Following are instructions on how to add drop shadows on a WordPress slider using CSS3. Easily create multiple drop shadows (outer or inner) on box elements, specifying values for  size, blur, color, and offset, using the box-shadow property.

The box-shadow property can accept a comma-separated list of shadows, each defined by 2-4 length values (specifying in order the horizontal offset, vertical offset, optional blur distance and optional spread distance of the shadow), an optional color value and an optional ‘inset‘ keyword (to create an inner shadow, rather than the default outer shadow).

The Syntax:

Using Pseudo-elements CSS3 code, create the drop shadows

.shadow::before {

content:”;
position:absolute;
width:100%;
height:100%;
-moz-box-shadow:0px 6px 7px -5px black inset, 0px -12px 6px -5px black inset;
-webkit-box-shadow:0px 6px 7px -5px black inset, 0px -12px 6px -5px black inset;
box-shadow:0px 6px 7px -5px black inset, 0px -12px 6px -5px black inset;

}

:before  – pseudo-element is used to insert some content before the content of an element.

content:”;

width and height of 100% with position: absolute ensures that shadows are on top.

box-shadow, -moz-box-shadow, -webkit-box-shadow – ensures that box shadow shows up using different browers (-moz for Firefox, -webkit for Safari and Chrome0

box-shadow: horizontal shadow vertical shadow blur spread color inset;

TIP: When you create shadows use distinctly different colors to help identify the shadow that you are working with.