Shadow

A composite type combining dimension with a color to form a CSS box-shadow, as defined in 9.5.

JSON

{
  "shadow-md": {
    "$type": "shadow",
    "$value": {
      "offsetX": "0px",
      "offsetY": "4px",
      "blur": "8px",
      "spread": 0,
      "color": "rgb(0, 0, 0, 0.15)"
    }
  }
}

YAML

shadow-md:
  $type: shadow
  $value:
    offsetX: 0px
    offsetY: 4px
    blur: 8px
    spread: 0
    color: "rgb(0, 0, 0, 0.15)"

Property	Type	Description
$type	string	Required. "shadow"
$value	object	Required. Specify offsetX, offsetY, blur, spread, and color to form a shadow. color is the only required prop.
$description	string	(Optional) A description of this token and its intended usage.

Tips & recommendations

• For smoother shadows, try layering multiple.