shadow box effect in css code example

Example 1: box shadow css

box-shadow: 3px 3px 6px 5px #ccc;

or

box-shadow: 0px 5px 17px -7px rgba(0, 0, 0, 0.75);

Example 2: box shadow css

/* 
box-shadow: horizontal-offset | vertical-offset | blur-distance | spread-of-shadow | color

Horizontal offset:  Negative values position the shadow to the left of the box.
Vertical offset:    Negative values position the shadow to the top of the box.
Blur distance:      If omitted, the shadow is a solid line like a border.
Spread of shadow:   Positive value will cause shadow to expand in all directions, and negative value will make it contract.
 */
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

Example 3: box shadow css

#example1 {
  box-shadow: 10px 10px 8px 10px #888888;

    }

Example 4: box shadow css

/* add depth to your webpage */

box-shadow: <x-offset> <y-offset> <blur-radius> <spread-radius> <color>;