A natural-looking shadow makes a big impact to a design. They communicate depth to the user, helping them differentiate between the surface layer and those above it. Shadows are supported in portraying depth by borders and background colors.
Values
Shadows are available in the common “bottom” orientation, as well as top, left and right. Values below are for bottom; for top, make Y negative, and for left and right, change the Y to Z.
Usage
Don’t overuse shadows on the UI. There should be no more than 2 shadowed layers on the Z axis at once. The shadow closest to the background (a card) should always be z1, never z2 - z4.
Do
Do use a maximum of 2 shadowed layers on each other.
Don’t
Don’t use more than 2 shadowed layers on each other.
Do
Do apply z1, z2, z3 or z4 respectively.
Don’t
Don’t use a larger shadow behind a smaller shadow.
Do
Do apply z1 to elements closest to the background (cards) and z2+ for everything else.
Don’t
Don’t apply z2+ to cards or z1 to any component other than cards. Don’t apply shadows to every component, like text inputs and toggle switches.
Do
Do apply z1 to cards that contain interactions.
Don’t
Don’t remove shadows on cards with interactions.
Do
Do remove shadows from non-interactive cards. You can also just put content directly on the background, avoiding cards altogether.