Layered shadows

Interface designers often combine a tight contact shadow with a wider, softer shadow to suggest depth. The example layers a contact shadow and an ambient shadow into one combined shadow.

Layering the two often looks more natural than a single shadow. In CSS, you can list several shadows in one box-shadow, separated by commas.

When elements stack on top of each other, keep the light direction the same for every layer and element. Shadows pointing different ways make a screen confusing.