Shadows are used in many cases to emphasize visual elements. In some cases, we use shadows as feedback for an event like ‘hover’ or to indicate the focus.

Primary Box Shadows

For the First layer (the element comes directly over a fluid background with color or background image) of any block element, we use primary box shadows.

  1. Normal View
  2. Hoverd View
/* Primary Shadows Normal View */
box-shadow: 5px 10px 30px 0 rgba(0,0,0,0.05);

/* Primary Shadows Hoverd View */
box-shadow: 5px 10px 10px 0 rgba(0,0,0,0.05);