Shadows

.shadow-sm

0 1px 2px 0 rgb(15 23 42 / 0.05)

.shadow

0 1px 3px 0 rgb(15 23 42 / 0.1), 0 1px 2px -1px rgb(15 23 42 / 0.1)

.shadow-md

0 4px 6px -1px rgb(15 23 42 / 0.1), 0 2px 4px -2px rgb(15 23 42 / 0.1)

.shadow-lg

0 10px 15px -3px rgb(15 23 42 / 0.1), 0 4px 6px -4px rgb(15 23 42 / 0.1)

.shadow-xl

0 20px 25px -5px rgb(15 23 42 / 0.1), 0 8px 10px -6px rgb(15 23 42 / 0.1)

.shadow-2xl

0 25px 50px -12px rgb(15 23 42 / 0.25)

.shadow-inner

inset 0 2px 4px 0 rgb(15 23 42 / 0.05)

.shadow-none

none

Usage in Figma

Shadows are published from Stylus Design Tokens and should be available by default in Scribe Figma files. Select the hexagon icon in applicable fields to apply shadow tokens.

Usage in code

Apply shadows using the shadow-{size} utility classes.

<Component className="shadow-sm" /> // Small shadow
<Component className="shadow-md" /> // Medium shadow
<Component className="shadow-lg" /> // Large shadow

For more information, see the Tailwind documentation.