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.
Name | Value |
---|---|
box-shadow-drop-small | 0 1px 1px rgba( 0, 0, 0, 0.2 ) |
box-shadow-drop-medium | 0 2px 2px 0 rgba( 0, 0, 0, 0.2 ) |
box-shadow-drop-xx-large | 0 20px 48px 0 rgba( 0, 0, 0, 0.2 ) |
box-shadow-inset-small | inset 0 0 0 1px |
box-shadow-inset-medium | inset 0 0 0 2px |
box-shadow-inset-medium-vertical | inset 0 -2px 0 0 |
box-shadow-outset-small | 0 0 0 1px |
box-shadow-outset-small-top | 0 -1px 0 0 |
box-shadow-outset-small-start | -1px 0 0 0 |
Box shadow colors
Name | Value |
---|---|
box-shadow-color-base | #000 |
box-shadow-color-progressive--active | #233566 |
box-shadow-color-progressive--focus | #36c |
box-shadow-color-progressive-selected | #36c |
box-shadow-color-progressive-selected--hover | #4b77d6 |
box-shadow-color-progressive-selected--active | #233566 |
box-shadow-color-destructive--focus | #36c |
box-shadow-color-inverted | #fff |
box-shadow-color-transparent | transparent |