"Key lights create sharper, directional shadows, called key shadows."

University of Michigan - Ann Arbor

"Shadows in the Material environment are cast by a key light and ambient light (and should be a combination). In Android and iOS development, shadows occur when light sources are blocked by Material surfaces at various positions along the z-axis. On the web, shadows are depicted by manipulating the y-axis only. The following example shows a card with an elevation of 6dp."


Light Sources

Material Design Documentation

Key Light

"Ambient light appears from all angles to create diffused, soft shadows, called ambient shadows."

Ambient Light

RULE: You should use combined key and ambient lighting on UI elements, on both light and dark backgrounds, as shown below.

Learn Before

Related