We use shadows to provide cues about depth, direction of movement and surface edges.
| Token | Value | Example |
|---|---|---|
shadowElevateShadow that elevates elements from their bottom edge. | 0 8px 12px -4px var(--colorShadowDepth) | |
shadowElevateLoudShadow that strongly elevates elements from their bottom edge. | 0 2px 8px -6px var(--colorShadowDepthLoud) | |
shadowElevateQuietShadow that subtly elevates elements subtly from their bottom edge. | 0 8px 12px -4px var(--colorShadowDepthQuiet) | |
shadowRaiseShadow that raises elements off the page from all edges. | 0 6px 24px 0 var(--colorShadowDepth) | |
shadowRaiseQuietShadow that subtly raises elements off the page from all edges. | 0 3px 12px 0 var(--colorShadowDepth) |
Didn't find what you were looking for?
Let us know in #team-design-systems or make a request.
Edit this page