Box-shadow

Shadow (shorthand)

Shadows are used to show depth on the surface of a page. Borders are used alongside shadows to further emphasize the edge of a shape, especially in dark mode, where shadows are far more subtle.

The "light source" for these shadows is oriented between the top and center of the object which has the shadow applied. There are two levels of shadows in Codex represented as small, medium, and large.

• Small should be used for elements which other content disappears behind, and are on the lowest possible elevated plane, such as ProgressBars, toolbars, and collapsed headers.
• Medium should be used for elements which appear overtop of other content, but are triggered from a directly related element on the page, such as Menus.
• Large should be used for elements which appear overtop of an entire page or surface area, or require extra attention, such as Dialogs, Toasts, previews, and bottom sheets.

Shadow levels should not change when a new plane is created. For example, a Menu which appears within a Dialog should still have a medium box-shadow.

List of design token names, values and metadata for box-shadow

Name	Value
box-shadow-small	0 0 0 1px #a2a9b1 box-shadow.outset.small box-shadow.color.base
box-shadow-small-top	0 -1px 0 0 #a2a9b1 box-shadow.outset.small-top box-shadow.color.base
box-shadow-small-bottom	0 1px 0 0 #a2a9b1 box-shadow.outset.small-bottom box-shadow.color.base
box-shadow-medium	0 4px 4px 0 rgba( 0, 0, 0, 0.06 ), 0 0 8px 0 rgba( 0, 0, 0, 0.06 ) box-shadow.outset.medium-below box-shadow.color.alpha-base box-shadow.outset.medium-around box-shadow.color.alpha-base
box-shadow-large	0 4px 8px 0 rgba( 0, 0, 0, 0.06 ), 0 0 16px 0 rgba( 0, 0, 0, 0.06 ) box-shadow.outset.large-below box-shadow.color.alpha-base box-shadow.outset.large-around box-shadow.color.alpha-base

Inset shadow

List of design token names, values and metadata for box-shadow

Name	Value
box-shadow-inset-small	inset 0 0 0 1px box-shadow.25
box-shadow-inset-medium	inset 0 0 0 2px box-shadow.50
box-shadow-inset-medium-vertical	inset 0 -2px 0 0 box-shadow.50-vertical

Outset shadow

List of design token names, values and metadata for box-shadow

Name	Value
box-shadow-outset-small	0 0 0 1px box-shadow.25-outset
box-shadow-outset-small-top	0 -1px 0 0 box-shadow.25-top
box-shadow-outset-small-bottom	0 1px 0 0 box-shadow.25-bottom
box-shadow-outset-small-start	-1px 0 0 0 box-shadow.25-start
box-shadow-outset-medium-below	0 4px 4px 0 box-shadow.100
box-shadow-outset-medium-around	0 0 8px 0 box-shadow.200
box-shadow-outset-large-below	0 4px 8px 0 box-shadow.300
box-shadow-outset-large-around	0 0 16px 0 box-shadow.400

Box-shadow color

List of design token names, values and metadata for --cdx-demo-box-shadow-color

Name	Value
box-shadow-color-base	#a2a9b1 color.gray400
box-shadow-color-progressive--active	#233566 color.blue900
box-shadow-color-progressive--focus	#36c color.blue700
box-shadow-color-progressive-selected	#36c color.blue700
box-shadow-color-progressive-selected--hover	#3056a9 color.blue800
box-shadow-color-progressive-selected--active	#233566 color.blue900
box-shadow-color-destructive--focus	#36c color.blue700
box-shadow-color-inverted	#fff color.white
box-shadow-color-alpha-base	rgba( 0, 0, 0, 0.06 ) color.opacity-lowest-dark
box-shadow-color-transparent	transparent color.transparent

Drop shadow (deprecated)

Drop shadows are deprecated, and shadow shorthands should be used instead.

List of design token names, values and metadata for box-shadow

Name	Value
box-shadow-drop-small deprecated	0 0 0 1px #a2a9b1 box-shadow.outset.small box-shadow.color.base
box-shadow-drop-medium deprecated	0 4px 4px 0 rgba( 0, 0, 0, 0.06 ), 0 0 8px 0 rgba( 0, 0, 0, 0.06 ) box-shadow.outset.medium-below box-shadow.color.alpha-base box-shadow.outset.medium-around box-shadow.color.alpha-base
box-shadow-drop-xx-large deprecated	0 20px 48px 0 rgba( 0, 0, 0, 0.2 ) box-shadow.500