Light comes from above

One design tip you'll see everywhere once you know it:

Light comes from above.

🙄

Kind of obvious, but this means that:

  • Objects are lighter at the top
  • Shadows fall below elements
  • Elements closer to you are brighter

This is why shadows spreading out evenly seem subtly wrong.

circle with shadow spreading out

This is why gradients that are darker on the top seem weird.

gradient that is darker on top

This is why darker cards on lighter backgrounds are off.

darker box on light background

Just remember: Light comes from above!

Box where light comes from above

As soon as you know this you’ll notice it everywhere!

Example with components from Material UI and MacOs and iOS