Shadows

Directions on how to elevate content from base surface via shadows

Live Tokens

shadow

0 6px 12px 0 rgba(0,0,0,0.1), 0 2px 12px 0 rgba(0,0,0,0.06)

medium

0 1px 8px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.06)

extraSmall

0 1px 1px 0 rgba(0,0,0,0.16), 0 1px 8px 0 rgba(0,0,0,0.16)

small

0 2px 6px 0 rgba(0,0,0,0.26), 0 24px 32px -4px rgba(0,0,0,0.42)

large

-2px -2px 16px 0 rgba(0,0,0,0.06)

layoutPrimary

-4px 0 16px 0 rgba(0,0,0,0.16), -12px 4px 24px -4px rgba(0,0,0,0.32)

drawer

0 0 0 1px rgb(68,155,225), 0 0 0 5px rgba(68,155,225,0.4)

focused

inset 0 0 0 4px rgba(68,155,225,0.4)

focusedInset