Skip to Content

Design Shadow

Book: Refactoring UI
  • Shadows allow you to add depth and position elements relative to each other by depth

  • Shadows not only encode depth information but also information about whether the user can interact with the element in question

    • Ex: Elevated components seem like they can be interacted with, pressed button implies non-interactivity etc
  • There are 2 shadows that are cast by an object: One light shadow where ambient light reaches, and one dark shadow where even ambient light can’t reach

    • The farther the object, the lesser the darker shadow
Elevation System,