Light and Shadows in Material Design System
The Material Design Environment
In Google’s Material Design System, UIs are displayed in an environment that is a metaphor of the physical world. It is inspired by the physical world and its textures, including how they reflect light and cast shadows.
In the physical world, objects can be stacked or attached to one another, but cannot pass through each other. They cast shadows and reflect light.
Material Design reflects these qualities in how surfaces are displayed and move across the Material UI. Surfaces, and how they move in three dimensions (3D), are communicated in ways that resemble how they move in the physical world, using light, surfaces, and cast shadows.
The goal of Material Design is to create hierarchy, meaning, and focus that immerse viewers in the experience.
Light in Material Design
In the Material Design environment, virtual lights illuminate the UI. Key lights create sharper, directional shadows, called key shadows. Ambient light appears from all angles to create diffused, soft shadows, called ambient shadows.
Shadows in the Material environment are cast by a key light and ambient light. 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.
In Material environment, you should always combined shadow from key and ambient lights.
Shadows in Material Design
Material surfaces at different elevations cast shadows. As you can see from video, the smaller the elevation value, the more solid the shadow gets.
Usage of Shadows
Because shadows express the degree of elevation between surfaces, they must be used consistently throughout your product.