Skip to content

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
NameValue
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
NameValue
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
#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-transparent
transparent

color.transparent