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

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 lights create sharper, directional shadows, called key shadows."

Key Light

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

Learn Before

Related