Skip to main content

Effect

Figma has four types of effects:

These are split into 3 types:

type Effect = DropShadowEffect | InnerShadowEffect | BlurEffect

DropShadowEffect

interface DropShadowEffect {
type: 'drop-shadow'
color: HexCode | Color
offset: Vector
blur: number
blendMode?: BlendMode
spread?: number
visible?: boolean
showShadowBehindNode?: boolean
}

type: 'drop-shadow'

The type of the shadow.


color: HexCode | Color

The color of the shadow, including its opacity.


offset: Vector

The offset of the shadow relative to its object. Use this property to simulate the direction of the light.


blur: number

The blur radius of the shadow. Must be >= 0. A lower radius creates a sharper shadow.


blendMode?: BlendMode

Determines how the color of this shadow blends with the colors underneath it.


spread?: number

The distance by which to expand (or contract) the shadow. For drop shadows, a positive spread value creates a shadow larger than the node, whereas a negative value creates a shadow smaller than the node. For inner shadows, a positive spread value contracts the shadow. Additionally, spread values are only accepted on rectangles, ellipses, frames, components, and instances with visible fill paints and clipsContent enabled. When left unspecified, the default value is 0.


visible?: boolean

Whether this shadow is visible.


showShadowBehindNode?: boolean

Whether the drop shadow should show behind translucent or transparent pixels within the node's geometry. Defaults to true.


InnerShadowEffect

interface InnerShadowEffect {
type: 'inner-shadow'
color: HexCode | Color
offset: Vector
blur: number
blendMode?: BlendMode
spread?: number
visible?: boolean
}

type: 'inner-shadow'

The type of the shadow.


color: HexCode | Color

The color of the shadow, including its opacity.


offset: Vector

The offset of the shadow relative to its object. Use this property to simulate the direction of the light.


blur: number

The blur radius of the shadow. Must be >= 0. A lower radius creates a sharper shadow.


blendMode?: BlendMode

Determines how the color of this shadow blends with the colors underneath it.


spread?: number

The distance by which to expand (or contract) the shadow. For drop shadows, a positive spread value creates a shadow larger than the node, whereas a negative value creates a shadow smaller than the node. For inner shadows, a positive spread value contracts the shadow. Additionally, spread values are only accepted on rectangles, ellipses, frames, components, and instances with visible fill paints and clipsContent enabled. When left unspecified, the default value is 0.


visible?: boolean

Whether this shadow is visible.


BlurEffect

interface BlurEffect {
type: 'layer-blur' | 'background-blur'
blur: number
visible?: boolean
}

type: 'layer-blur' | 'background-blur'

The type of the blur.


blur: number

The blur radius of the shadow. Must be >= 0. A lower radius creates a sharper shadow.


visible?: boolean

Whether this shadow is visible.