Box shadow

TIP

Some box shadow colors vary between light and dark modes. Use the color mode switcher in the site header to see the box shadow colors in the different modes. Using design tokens rather than raw hex codes will ensure you're automatically using the right color for the chosen mode.

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

Name	Value
box-shadow-drop-small This features color as part of the theme token value.	0 1px 1px rgba( 0, 0, 0, 0.2 ) box-shadow.100
box-shadow-drop-medium This features color as part of the theme token value.	0 2px 2px 0 rgba( 0, 0, 0, 0.2 ) box-shadow.200
box-shadow-drop-xx-large This features color as part of the theme token value.	0 20px 48px 0 rgba( 0, 0, 0, 0.2 ) box-shadow.500
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
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-start	-1px 0 0 0 box-shadow.25-start

Box shadow colors

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

Name	Value
box-shadow-color-base	#000 color.black
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	#4b77d6 color.blue600
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-transparent	transparent color.transparent