$type: "shadow"
composite
Shadow Token
Shadow tokens represent CSS box-shadow values. The $value is a composite object with fields: color, offsetX (dimension), offsetY (dimension), blur (dimension), spread (dimension), and an optional inset boolean. Multiple shadows can be expressed as an array of these composite objects, mirroring CSS's ability to layer box shadows.
Value Format
A composite object (or array of objects) with color, offsetX, offsetY, blur, and spread
Composite Fields
| Field | Type | Required | Description |
|---|---|---|---|
| color | color | yes | The shadow color |
| offsetX | dimension | yes | Horizontal offset |
| offsetY | dimension | yes | Vertical offset |
| blur | dimension | yes | Blur radius |
| spread | dimension | yes | Spread radius |
| inset | boolean | no | Whether it is an inset shadow |
When to Use
Use shadow tokens to create a consistent elevation system. Define shadow levels (e.g. shadow-sm, shadow-md, shadow-lg) and apply them to cards, modals, dropdowns, and popovers to communicate depth hierarchy.
Valid Example
Valid JSON .json
{
"shadow": {
"sm": {
"$value": {
"color": "rgba(0,0,0,0.08)",
"offsetX": "0px",
"offsetY": "1px",
"blur": "4px",
"spread": "0px"
},
"$type": "shadow"
},
"lg": {
"$value": [
{
"color": "rgba(0,0,0,0.04)",
"offsetX": "0px",
"offsetY": "4px",
"blur": "16px",
"spread": "0px"
},
{
"color": "rgba(0,0,0,0.08)",
"offsetX": "0px",
"offsetY": "2px",
"blur": "4px",
"spread": "0px"
}
],
"$type": "shadow"
}
}
} Paste the example above into the validator to test it yourself.
Open Validator