Shadow

A drop or inner shadow — or a stack of several, as one token.

---

Value format

A single layer:

{
  "$type": "shadow",
  "$value": {
    "color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.1 },
    "offsetX": { "value": 0, "unit": "px" },
    "offsetY": { "value": 1, "unit": "px" },
    "blur": { "value": 3, "unit": "px" },
    "spread": { "value": 0, "unit": "px" }
  }
}

Or an array of layers, painted in order:

{ "$type": "shadow", "$value": [ { … }, { … } ] }

Slot	Type	Required
color	color or reference	Yes
offsetX	dimension or reference	Yes
offsetY	dimension or reference	Yes
blur	dimension or reference	Yes
spread	dimension or reference	No
inset	boolean	No — true makes it an inner shadow

---

Authoring

The value field is a multi-layer builder: add a layer, fill the five fields, add another. Each field individually accepts a literal or a {reference}.

---

How it is displayed

The tile shows CSS box-shadow syntax, comma-joined for multiple layers:

0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a

The swatch shows the first layer’s colour.

---

Applying to Figma

Default target: the layer’s effects. Requires a layer that supports effects.

DTCG	Figma
inset: true	INNER_SHADOW
inset absent or false	DROP_SHADOW
offsetX / offsetY	Effect offset
blur	Effect radius, clamped to ≥ 0
spread	Effect spread

rem values are converted to px here (base 16).

Shadows replace, other effects survive

Applying a shadow token removes all existing drop and inner shadows on the layer and writes the token’s layers in their place. Non-shadow effects — layer blur, background blur, noise, texture — are preserved.

Nested references resolve up to 10 levels deep.

---

Recipe: an elevation scale

{
  "elevation": {
    "1": {
      "$type": "shadow",
      "$value": {
        "color": "{global.color.shadow.subtle}",
        "offsetX": { "value": 0, "unit": "px" },
        "offsetY": { "value": 1, "unit": "px" },
        "blur": { "value": 2, "unit": "px" }
      }
    },
    "2": {
      "$type": "shadow",
      "$value": [
        { "color": "{global.color.shadow.subtle}", "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 4, "unit": "px" }, "blur": { "value": 6, "unit": "px" } },
        { "color": "{global.color.shadow.subtle}", "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 2, "unit": "px" }, "blur": { "value": 4, "unit": "px" } }
      ]
    }
  }
}

Pointing every layer’s colour at one reference means a single edit re-tunes the whole scale.