Switch to Wilmington
Overview

Shadow

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.

KeyAmbientUsage
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.