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	0 1px 1px rgba( 0, 0, 0, 0.2 ) Defined in src/application.json Refers to box-shadow.100 This features color as part of the theme token value.
box-shadow-drop-medium	0 2px 2px 0 rgba( 0, 0, 0, 0.2 ) Defined in src/application.json Refers to box-shadow.200 This features color as part of the theme token value.
box-shadow-drop-xx-large	0 20px 48px 0 rgba( 0, 0, 0, 0.2 ) Defined in src/application.json Refers to box-shadow.500 This features color as part of the theme token value.
box-shadow-inset-small	inset 0 0 0 1px Defined in src/application.json Refers to box-shadow.25
box-shadow-inset-medium	inset 0 0 0 2px Defined in src/application.json Refers to box-shadow.50
box-shadow-inset-medium-vertical	inset 0 -2px 0 0 Defined in src/application.json Refers to box-shadow.50-vertical
box-shadow-outset-small	0 0 0 1px Defined in src/application.json Refers to box-shadow.25-outset
box-shadow-outset-small-top	0 -1px 0 0 Defined in src/application.json Refers to box-shadow.25-top
box-shadow-outset-small-start	-1px 0 0 0 Defined in src/application.json Refers to 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 Defined in src/application.json Refers to color.black
box-shadow-color-progressive--active	#233566 Defined in src/application.json Refers to color.blue900
box-shadow-color-progressive--focus	#36c Defined in src/application.json Refers to color.blue700
box-shadow-color-progressive-selected	#36c Defined in src/application.json Refers to color.blue700
box-shadow-color-progressive-selected--hover	#4b77d6 Defined in src/application.json Refers to color.blue600
box-shadow-color-progressive-selected--active	#233566 Defined in src/application.json Refers to color.blue900
box-shadow-color-destructive--focus	#36c Defined in src/application.json Refers to color.blue700
box-shadow-color-inverted	#fff Defined in src/application.json Refers to color.white
box-shadow-color-transparent	transparent Defined in src/application.json Refers to color.transparent