Adding Volume

Shadows make interface " alive " . But there are two different ways to create them.

1. box-shadow

Draws shadow around element's " box " (border-box).

box-shadow: [x] [y] [blur] [spread] [color];

2. filter: drop-shadow()

Smart shadow. It considers content shape. If you have transparent PNG image or SVG, shadow will follow drawing contour, not rectangular frame.

Note

In modern design, shadows are made very soft. Instead of one black shadow, professionals often overlay 2-3 layers with different blur to achieve natural effect.

/* Soft 'designer' shadow */
box-shadow: 
  0 2px 10px rgba(0,0,0,0.05),
  0 15px 30px rgba(0,0,0,0.1);