Switch to WilmingtonShadow
Shadow styles create the perception of elevation along the z-axis to communicate hierarchy and organize information within a design.
Shadow Variants
Small
Use to position an object a small distance above the pane or level behind it. Artificially elevated objects, as well as elevated objects on the interaction level will use this style.
| Key | Ambient | Usage | |
|---|---|---|---|
Small / Down | color: #000 x, y: 0, 1 blur: 2 | color: #000 x, y: 0, 2 blur: 4 | For small distances on a mid-screen or top-aligned object |
Small / Up | color: #000 x, y: 0, -1 blur: 2 | color: #000 x, y: 0, -2 blur: 4 | For small distances on a bottom-aligned object |
Medium
Use to position an object a medium distance above the pane or level behind it. Elevated objects on the frame level will use this style.
Medium / Down | color: #000 x, y: 0, 2 blur: 4 | color: #000 x, y: 0, 4 blur: 8 | For medium distances on a mid-screen or top-aligned object |
Medium / Up | color: #000 x, y: 0, -2 blur: 4 | color: #000 x, y: 0, -4 blur: 8 | For medium distances on a bottom-aligned object |
Large
Use to position an object a large distance above the pane or level behind it. Elevated objects on the attention pane will use this style.
Large / Down | color: #000 x, y: 0, 3 blur: 6 | color: #000 x, y: 0, 6 blur: 12 | For large distances on a mid-screen or top-aligned object |
Large / Up | color: #000 x, y: 0, -3 blur: 6 | color: #000 x, y: 0, -6 blur: 12 | For large distances on a bottom-aligned object |
Extra Large
Use to position an object a large distance above the pane or level behind it. Elevated objects on the attention pane will use this style.
Extra Large / Down | color: #000 x, y: 0, 4 blur: 8 | color: #000 x, y: 0, 8 blur: 16 | For large distances on a mid-screen or top-aligned object |
Extra Large / Up | color: #000 x, y: 0, -4 blur: 8 | color: #000 x, y: 0, -8 blur: 16 | For large distances on a bottom-aligned object |
None
Use when an object is embedded within a given pane or level and not elevated above it. All objects in the foundational pane will use this style.
Design Environment
Consult the elevation guidelines to select the appropriate shadow size for an object, based on its position along the z-axis. Only apply shadows in the up direction when the down direction would be lost along the bottom edge of the screen or parent element.