SXL Studio
Tokens

Effects

Effects group token types: Shadow, Backdrop Blur, Blur, Glass, Effects — valid JSON shapes, keys, and production examples.

The Effects group defines visual layer effects.

All five types in this group export as Effect Style in Figma:

  • shadow
  • backdrop-blur
  • blur
  • glass
  • effects

Shadow

shadow describes one or multiple shadow layers.

Accepted $value shapes

  • alias: "{shadow.card}"
  • object: one shadow layer
  • array: multiple shadow layers

Shadow layer keys

KeyTypeNotes
typestringdropShadow (default) or innerShadow
colorstringCSS color or alias
offsetX / xnumber/stringhorizontal offset
offsetY / ynumber/stringvertical offset
blur / radiusnumber/stringblur radius
spreadnumber/stringspread value
blendModestringFigma blend mode
JSON
{
  "shadow": {
    "$type": "shadow",
    "card": {
      "$value": {
        "type": "dropShadow",
        "color": "#00000026",
        "offsetX": "0px",
        "offsetY": "4px",
        "blur": "12px",
        "spread": "0px",
        "blendMode": "NORMAL"
      }
    },
    "inset": {
      "$value": {
        "type": "innerShadow",
        "color": "#0000001A",
        "offsetX": 0,
        "offsetY": 1,
        "blur": 4,
        "spread": 0
      }
    }
  }
}

Backdrop Blur

backdrop-blur defines background blur (content behind the layer).

Accepted $value shapes

  • number or unit string: 8, "8px"
  • alias: "{blur.backdrop.sm}"
  • object: { "blur": ... } or { "radius": ... }
JSON
{
  "backdrop-blur": {
    "$type": "backdrop-blur",
    "sm": { "$value": "4px" },
    "md": { "$value": "8px" },
    "glass": { "$value": { "blur": "12px" } }
  }
}

Blur

blur defines layer blur (the layer itself).

Accepted $value shapes

  • number or unit string: 6, "6px"
  • alias: "{blur.layer.md}"
  • object: { "blur": ... } or { "radius": ... }
JSON
{
  "blur": {
    "$type": "blur",
    "sm": { "$value": "4px" },
    "md": { "$value": "8px" },
    "lg": { "$value": { "radius": "16px" } }
  }
}

Glass

glass is Figma's native glass effect.

Accepted $value shapes

  • alias: "{glass.card}"
  • object with glass keys

Glass object keys

KeyTypeNotes
visiblebooleaneffect visibility
lightIntensitynumber/stringclamped to 0..1
lightAnglenumber/stringangle value
refractionnumber/stringclamped to 0..1
depthnumber/stringminimum 1
dispersionnumber/stringclamped to 0..1
radiusnumber/stringminimum 0
JSON
{
  "glass": {
    "$type": "glass",
    "frosted": {
      "$value": {
        "visible": true,
        "lightIntensity": 0.35,
        "lightAngle": 45,
        "refraction": 0.2,
        "depth": 12,
        "dispersion": 0.1,
        "radius": 8
      }
    }
  }
}

Effects (combined)

effects is a composite stack for mixed effect layers in one token.

Accepted $value shapes

  • alias: "{effects.card}"
  • object: one effect layer
  • array: multiple effect layers

Layer type values

typeResult
dropShadowDrop shadow
innerShadowInner shadow
blur, layerBlur, layer_blurLayer blur
backgroundBlur, background_blur, backdropBlurBackground blur
glassGlass effect
JSON
{
  "effects": {
    "$type": "effects",
    "card-elevated": {
      "$value": [
        {
          "type": "dropShadow",
          "color": "#00000026",
          "offsetX": "0px",
          "offsetY": "4px",
          "blur": "10px",
          "spread": "0px"
        },
        {
          "type": "backgroundBlur",
          "blur": "8px"
        },
        {
          "type": "glass",
          "lightIntensity": 0.32,
          "lightAngle": 60,
          "refraction": 0.24,
          "depth": 10,
          "dispersion": 0.08,
          "radius": 10
        }
      ]
    }
  }
}

Full example

JSON
{
  "shadow": {
    "$type": "shadow",
    "sm": {
      "$value": {
        "color": "#0000001A",
        "offsetX": "0px",
        "offsetY": "1px",
        "blur": "3px",
        "spread": "0px"
      }
    }
  },
  "blur": {
    "$type": "blur",
    "md": { "$value": "8px" }
  },
  "backdrop-blur": {
    "$type": "backdrop-blur",
    "md": { "$value": "8px" }
  },
  "glass": {
    "$type": "glass",
    "card": {
      "$value": {
        "visible": true,
        "lightIntensity": 0.3,
        "lightAngle": 45,
        "refraction": 0.2,
        "depth": 12,
        "dispersion": 0.1,
        "radius": 8
      }
    }
  },
  "effects": {
    "$type": "effects",
    "card-stack": {
      "$value": [
        { "type": "dropShadow", "color": "#00000024", "offsetX": 0, "offsetY": 4, "blur": 12, "spread": 0 },
        { "type": "backgroundBlur", "blur": 6 }
      ]
    }
  }
}