SXL Studio
Tokens

Effects

Effects group token types: Shadow, Backdrop Blur, Blur, Glass, Effects — shadows, blurs, glass, and combined effects with examples.

The Effects group covers visual layer effects: shadows, blurs, glass, and their combinations.

All types in this group export as Effect Style in Figma.

Shadow

A shadow token. Supports single and multiple shadows (array).

Figma: exports as Effect Style (Drop Shadow / Inner Shadow).

Single shadow:

JSON
{
  "shadow": {
    "sm": {
      "$value": {
        "color": "#0000001A",
        "offsetX": "0px",
        "offsetY": "1px",
        "blur": "3px",
        "spread": "0px"
      },
      "$type": "shadow"
    }
  }
}

Object properties:

PropertyTypeDescription
colorstringShadow color (CSS format, with alpha)
offsetXstring / numberHorizontal offset
offsetYstring / numberVertical offset
blurstring / numberBlur radius
spreadstring / numberSpread radius
typestringdropShadow (default) or innerShadow
blendModestringBlend mode

Multiple shadows:

JSON
{
  "shadow": {
    "elevated": {
      "$value": [
        {
          "color": "#00000026",
          "offsetX": "0px",
          "offsetY": "4px",
          "blur": "6px",
          "spread": "-1px"
        },
        {
          "color": "#0000000D",
          "offsetX": "0px",
          "offsetY": "2px",
          "blur": "4px",
          "spread": "-2px"
        }
      ],
      "$type": "shadow"
    }
  }
}

Inner Shadow:

JSON
{
  "shadow": {
    "inset": {
      "$value": {
        "color": "#0000001A",
        "offsetX": "0px",
        "offsetY": "2px",
        "blur": "4px",
        "spread": "0px",
        "type": "innerShadow"
      },
      "$type": "shadow"
    }
  }
}

Tip: for realistic shadows, use multiple layers with different blur and opacity values. This creates more natural shading.

Multi-layer shadows: sm, md, lg, xl

Backdrop Blur

Background blur (content behind the layer).

Figma: exports as Effect Style (Background Blur).

Simple value:

JSON
{
  "backdrop-blur": {
    "$type": "backdrop-blur",
    "sm": { "$value": "4px" },
    "md": { "$value": "8px" },
    "lg": { "$value": "16px" },
    "xl": { "$value": "24px" }
  }
}

Object value:

JSON
{
  "backdrop-blur": {
    "glass": {
      "$value": { "blur": "12px" },
      "$type": "backdrop-blur"
    }
  }
}

CSS: backdrop-filter: blur(...).

Tip: backdrop blur is great for frosted glass cards and overlays. Combine with a semi-transparent fill.

Blur

Layer blur (blurs the layer itself).

Figma: exports as Effect Style (Layer Blur).

JSON
{
  "blur": {
    "$type": "blur",
    "sm": { "$value": "4px" },
    "md": { "$value": "8px" },
    "lg": { "$value": "16px" }
  }
}

CSS: filter: blur(...).

Difference from Backdrop Blur: blur blurs the layer itself. backdrop-blur blurs what's visible through the layer.

Glass

Figma's glass effect. A composite type with granular control.

Figma: exports as Effect Style (Glass).

JSON
{
  "glass": {
    "frosted": {
      "$value": {
        "visible": true,
        "lightIntensity": 50,
        "lightAngle": 90,
        "refraction": 10,
        "depth": 5,
        "dispersion": 0,
        "radius": 20
      },
      "$type": "glass"
    }
  }
}

Object properties:

PropertyTypeDescription
visiblebooleanEffect visibility
lightIntensitynumberLight intensity (0–100)
lightAnglenumberLight angle (degrees)
refractionnumberRefraction coefficient
depthnumberGlass depth
dispersionnumberColor dispersion
radiusnumberBlur radius

Note: Glass is a native Figma effect introduced in 2024. It's only available in Figma and has no direct CSS equivalent. For code export, use a combination of backdrop-filter and background.

Effects (combined)

A universal composite type for describing multiple effects at once: shadows, blurs, glass — in a single token.

Figma: exports as Effect Style.

JSON
{
  "effects": {
    "card-elevated": {
      "$value": {
        "dropShadow": [
          { "color": "#00000026", "offsetX": "0px", "offsetY": "4px", "blur": "8px", "spread": "0px" }
        ],
        "backgroundBlur": { "blur": "8px" }
      },
      "$type": "effects"
    }
  }
}

Accepted object keys:

KeyDescription
dropShadowDrop Shadow (array or object)
innerShadowInner Shadow (array or object)
blur / layerBlurLayer Blur
backgroundBlurBackground Blur
glassGlass effect

Tip: use effects when you need to combine shadow and blur in one style. For simple shadows, shadow is sufficient.

Full example: effects system

JSON
{
  "shadow": {
    "$type": "shadow",
    "xs": {
      "$value": {
        "color": "#0000000D",
        "offsetX": "0px",
        "offsetY": "1px",
        "blur": "2px",
        "spread": "0px"
      }
    },
    "sm": {
      "$value": [
        { "color": "#0000001A", "offsetX": "0px", "offsetY": "1px", "blur": "3px", "spread": "0px" },
        { "color": "#0000000F", "offsetX": "0px", "offsetY": "1px", "blur": "2px", "spread": "-1px" }
      ]
    },
    "md": {
      "$value": [
        { "color": "#0000001A", "offsetX": "0px", "offsetY": "4px", "blur": "6px", "spread": "-1px" },
        { "color": "#0000000D", "offsetX": "0px", "offsetY": "2px", "blur": "4px", "spread": "-2px" }
      ]
    },
    "lg": {
      "$value": [
        { "color": "#0000001A", "offsetX": "0px", "offsetY": "10px", "blur": "15px", "spread": "-3px" },
        { "color": "#0000000D", "offsetX": "0px", "offsetY": "4px", "blur": "6px", "spread": "-4px" }
      ]
    },
    "xl": {
      "$value": [
        { "color": "#00000033", "offsetX": "0px", "offsetY": "20px", "blur": "25px", "spread": "-5px" },
        { "color": "#0000001A", "offsetX": "0px", "offsetY": "8px", "blur": "10px", "spread": "-6px" }
      ]
    }
  },
  "backdrop-blur": {
    "$type": "backdrop-blur",
    "sm": { "$value": "4px" },
    "md": { "$value": "12px" },
    "lg": { "$value": "24px" }
  },
  "blur": {
    "$type": "blur",
    "sm": { "$value": "4px" },
    "md": { "$value": "8px" }
  }
}