Overview
Shadows help us create hierarchies and emphasis. They improve understanding & user interactions. Because shadows express the degree of elevation between surfaces, they must be used consistently throughout the interface.
They bring additional information on the interface and more specifically on the targeted component. It can indicate possible interactions or reactions triggered by a user’s action.
Principles
Use them sparingly. The majority of our interface is very flat. Only use a shadow when appropriate and you want to indicate an element is above other elements. Too many shadows make the UI appear very busy. Always try to work with the smallest shadow possible.
Shadows with higher numbers are usually visually closer to the user and have typically larger and more spread shadow.
Tokens
| Token | Value |
|---|---|
| shadow-none | 0 |
| shadow-sm | 0 1px 2px 0 rgb(0 0 0 / 10%) |
| shadow-md | 0 0 0 1px rgba( 56, 60, 67, .05 ), 0 1px 3px 0 rgba( 56, 60, 67, 0.15) |
| shadow-lg | 0 0 0 1px rgba( 56, 60, 67, .07 ), 0 3px 6px 0 rgba( 56, 60, 67, 0.15) |