Shadows & Elevation
Shadows and elevations are used across components and patterns to establish and maintain functional boundaries between them. It helps to create visual hierarchy and focus through depth.
The elevation system is made mainly from Material Design Elevation system in which you can find more recommendations and guidelines.
Shadows
Shadows are used to express the degree of elevation between surfaces. This degree of elevation depends of the size of the shadow and its softness. The closer is the surface from the surface behind it, the smaller and sharpest will be its shadow. In contrary, if the surface is far, the shadow will be larger and softer.
| Token name | Preview | Elevation (dp) | Shadow values | Usage |
|---|---|---|---|---|
| $shadow-xs-strong $shadow-xs-light $shadow-xs-ultralight | STRONG LIGHT ULTRALIGHT | 2 | Strong 0 2px 2px 0 hsla(235, 96%, 10%, 0.14) 0 3px 4px 0 hsla(235, 96%, 10%, 0.14) 0 1px 5px 0 hsla(235, 96%, 10%, 0.2) Light 0 2px 2px 0 hsla(235, 96%, 10%, 0.04) 0 3px 4px 0 hsla(235, 96%, 10%, 0.04) 0 1px 5px 0 hsla(235, 96%, 10%, 0.08) Ultralight 0 2px 2px 0 hsla(235, 96%, 10%, 0.02) 0 3px 4px 0 hsla(235, 96%, 10%, 0.02) 0 1px 5px 0 hsla(235, 96%, 10%, 0.04) |
|
| $shadow-s-strong $shadow-s-light $shadow-s-ultralight | STRONG LIGHT ULTRALIGHT | 4 | Strong 0 2px 4px 0 hsla(235, 96%, 10%, 0.14) 0 4px 5px 0 hsla(235, 96%, 10%, 0.12) 0 1px 10px 0 hsla(235, 96%, 10%, 0.20) Light 0 2px 4px 0 hsla(235, 96%, 10%, 0.04) 0 4px 5px 0 hsla(235, 96%, 10%, 0.04) 0 1px 10px 0 hsla(235, 96%, 10%, 0.08) Ultralight 0 2px 4px 0 hsla(235, 96%, 10%, 0.02) 0 4px 5px 0 hsla(235, 96%, 10%, 0.02) 0 1px 10px 0 hsla(235, 96%, 10%, 0.04) |
|
| $shadow-m-strong $shadow-m-light $shadow-m-ultralight | STRONG LIGHT ULTRALIGHT | 8 | Strong 0 8px 10px 0 hsla(235, 96%, 10%, 0.14) 0 3px 14px 0 hsla(235, 96%, 10%, 0.12) 0 4px 5px 0 hsla(235, 96%, 10%, 0.20) Light 0 8px 10px 0 hsla(235, 96%, 10%, 0.04) 0 3px 14px 0 hsla(235, 96%, 10%, 0.04) 0 4px 5px 0 hsla(235, 96%, 10%, 0.08) Ultralight 0 8px 10px 0 hsla(235, 96%, 10%, 0.02) 0 3px 14px 0 hsla(235, 96%, 10%, 0.02) 0 4px 5px 0 hsla(235, 96%, 10%, 0.04) |
|
| $shadow-l-strong $shadow-l-light $shadow-l-ultralight | STRONG LIGHT ULTRALIGHT | 12 | Strong 0 16px 24px 0 hsla(235, 96%, 10%, 0.14) 0 6px 30px 0 hsla(235, 96%, 10%, 0.12) 0 8px 10px 0 hsla(235, 96%, 10%, 0.20) Light 0 16px 24px 0 hsla(235, 96%, 10%, 0.04) 0 6px 30px 0 hsla(235, 96%, 10%, 0.04) 0 8px 10px 0 hsla(235, 96%, 10%, 0.08) Ultralight 0 16px 24px 0 hsla(235, 96%, 10%, 0.02) 0 6px 30px 0 hsla(235, 96%, 10%, 0.02) 0 8px 10px 0 hsla(235, 96%, 10%, 0.04) |
|
| $shadow-xl-strong $shadow-xl-light $shadow-xl-ultralight | STRONG LIGHT ULTRALIGHT | 16 | Strong 0 24px 38px 0 hsla(235, 96%, 10%, 0.14) 0 9px 46px 0 hsla(235, 96%, 10%, 0.12) 0 11px 15px 0 hsla(235, 96%, 10%, 0.20) Light 0 24px 38px 0 hsla(235, 96%, 10%, 0.04) 0 9px 46px 0 hsla(235, 96%, 10%, 0.04) 0 11px 15px 0 hsla(235, 96%, 10%, 0.08) Ultralight 0 24px 38px 0 hsla(235, 96%, 10%, 0.02) 0 9px 46px 0 hsla(235, 96%, 10%, 0.02) 0 11px 15px 0 hsla(235, 96%, 10%, 0.04) |
|
Elevations
Principles
The elevation is measured as the distance between surfaces. The distance from the front of one surface to the front of another is measured along the z-axis in density-independent pixels (dps) and depicted (by default) using shadows.
Each shadow is corresponding to a unit along the elevation scale going from 2dp to 24dp.
Depending of the surface behind them, surfaces with the same elevation can appear differently. In the example below, both surfaces A and B are at the same 8dp elevation. Because the surface B is in front of another surface (C) that already has 4dp elevation, it will cast a different shadow that is also 4dp.
Elevation hierarchy
Like typography styles, elevation can be used in order to enforce hierarchy of content depending on whether they are at similar or different elevations.
Content at different elevations
Surfaces in front of other surfaces typically:
- Contain more important content. The example below demonstrates how more important content that is of primary focus appears in front of content that is of secondary focus.
- Focuses attention while maintaining context
Content on coplanar surfaces
Contents that are placed at the same elevation (or coplanar surfaces) indicate they contain content of same level of hierarchy that have equal importance as one another. For example, all cards in a collection have equal importance.
