Effects
Effects group token types: Shadow, Backdrop Blur, Blur, Glass, Effects — verified JSON shapes, layer keys, and production examples.
Overview
Every type in this group exports as a Figma effect style.
$type | Value in one line |
|---|---|
shadow | One shadow object or an array of shadow layers |
backdrop-blur | A blur radius (number/unit) or { "blur": … } |
blur | A blur radius (number/unit) or { "blur": … } |
glass | A glass object (light, refraction, depth, …) |
effects | A mixed array of shadow + blur layers |
Shadow
A single shadow object or an array of layers (each layer is one shadow).
Shadow layer keys:
| Key | Values |
|---|---|
type | dropShadow, innerShadow (Figma DROP_SHADOW / INNER_SHADOW also accepted) |
color | Color string or alias |
offsetX | Number / unit string (alias x) |
offsetY | Number / unit string (alias y) |
blur | Number / unit string |
spread | Number / unit string |
{
"$type": "shadow",
"$value": [
{ "type": "dropShadow", "offsetX": 0, "offsetY": 1, "blur": 2, "spread": 0, "color": "#0000001F" },
{ "type": "dropShadow", "offsetX": 0, "offsetY": 8, "blur": 24, "spread": 0, "color": "#00000029" }
]
}
Backdrop Blur
Blur applied behind the layer. Accepts a number, a unit string, or { "blur": … }.
{ "$type": "backdrop-blur", "$value": "12px" }
{ "$type": "backdrop-blur", "$value": { "blur": 12 } }
Blur
Layer blur. Same shapes as backdrop blur.
{ "$type": "blur", "$value": "4px" }
Glass
A glass / liquid-glass effect object. All keys are optional.
| Key | Type |
|---|---|
visible | boolean |
radius | number / string |
depth | number / string |
refraction | number / string |
dispersion | number / string |
lightAngle | number / string |
lightIntensity | number / string |
{
"$type": "glass",
"$value": { "radius": 12, "depth": 8, "refraction": 0.2, "lightAngle": 135, "lightIntensity": 0.6 }
}
Effects (combined)
A mixed array that can hold both shadow and blur layers in one effect style.
Layer type values: dropShadow, innerShadow, layerBlur, backgroundBlur (Figma DROP_SHADOW / INNER_SHADOW / LAYER_BLUR / BACKGROUND_BLUR are also accepted).
Blur layers use radius; shadow layers use offsetX / offsetY / blur / spread / color.
{
"$type": "effects",
"$value": [
{ "type": "dropShadow", "offsetX": 0, "offsetY": 2, "blur": 8, "spread": 0, "color": "#00000033" },
{ "type": "backgroundBlur", "radius": 12 }
]
}
Full example
{
"shadow": {
"$type": "shadow",
"sm": { "$value": [{ "type": "dropShadow", "offsetX": 0, "offsetY": 1, "blur": 2, "color": "#0000001F" }] },
"lg": {
"$value": [
{ "type": "dropShadow", "offsetX": 0, "offsetY": 8, "blur": 24, "spread": 0, "color": "#00000029" }
]
}
},
"blur": { "$type": "blur", "card": { "$value": "8px" } },
"glass": { "$type": "glass", "panel": { "$value": { "radius": 12, "depth": 8, "refraction": 0.2 } } }
}