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-small0 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-medium0 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-large0 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-smallinset 0 0 0 1px

Defined in src/application.json

Refers to box-shadow.25

box-shadow-inset-mediuminset 0 0 0 2px

Defined in src/application.json

Refers to box-shadow.50

box-shadow-inset-medium-verticalinset 0 -2px 0 0

Defined in src/application.json

Refers to box-shadow.50-vertical

box-shadow-outset-small0 0 0 1px

Defined in src/application.json

Refers to box-shadow.25-outset

box-shadow-outset-small-top0 -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
NameValue
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-transparenttransparent

Defined in src/application.json

Refers to color.transparent