Material Design Box Shadows

In the Material Design, Shadows provide cues about depth, the direction of movement, and surface edges. Because shadows express the degree of elevation between surfaces, consistent use throughout the product gives an invariant look.

  • Edit
    Material Design Level 1
  • Edit
    Material Design Level 2
  • Edit
    Material Design Level 3
  • Edit
    Material Design Level 4
  • Edit
    Material Design Level 5
  • Edit
    Material Design Level 6
  • Edit
    Material Design Level 7
  • Edit
    Material Design Level 8

Box Shadow Property Tips

In the Material Design environment, virtual lights illuminate the UI. Key lights create sharper, directional shadows, called key shadows.

Shadow size reflects elevation. Surfaces at higher elevations have more giant shadows, while those at lower elevations have more minor shadows.