Inner shadow effect in Figma - Cell-by-Cell Formula Trace

Concept Flow

Shape (Fill Color) --> Inner Shadow (Shadow Color, Offset X, Offset Y, Blur, Spread) --> Final Visual Effect

The inner shadow effect is created by starting with a shape's fill color and then applying an inner shadow with specific color, offset, blur, and spread parameters to produce a subtle shading inside the shape.

Formula

Fill Color: #FF0000 Shadow Type: Inner Shadow Shadow Color: #00000080 Offset X: 2 Offset Y: 2 Blur: 4 Spread: 0

These are the parameters used in Figma to create the inner shadow effect on a red rectangle shape.

Step-by-Step Trace

Step	Expression	Evaluates To	Explanation
1	Start with base shape fill color #FF0000	#FF0000	The shape's base fill color is solid red.
2	Add inner shadow with color #00000080 (black with 50% opacity)	Shadow color applied inside shape edges	Inner shadow color is semi-transparent black to create shading inside the shape.
3	Offset shadow by (2, 2) pixels	Shadow shifted 2 pixels right and 2 pixels down inside shape	Offset moves the shadow inside the shape to create depth.
4	Apply blur radius of 4 pixels	Shadow edges softened by 4 pixels	Blur smooths the shadow edges for a natural look.
5	Spread is 0, so shadow size remains unchanged	Shadow size unchanged	Spread controls shadow size; zero means no size change.
6	Combine all effects to produce final inner shadow effect	Red rectangle with black inner shadow offset by (2,2), blurred by 4	The final visual effect is the red shape with a subtle black inner shadow inside edges.

The inner shadow effect is the result of layering a semi-transparent shadow inside the shape with specified offset and blur.

Variable Tracker

Variable	Value
Fill Color	#FF0000
Shadow Type	Inner Shadow
Shadow Color	#00000080
Offset X	2
Offset Y	2
Blur	4
Spread	0

Key Moments

What does the 'Offset X' value control in the inner shadow effect?

What happens if the 'Spread' value is set to zero?

Why is the shadow color set to #00000080 instead of pure black #000000?

Sheet Trace Quiz - 3 Questions

What does the 'Offset X' value control in the inner shadow effect?

A How far the shadow moves horizontally inside the shape

B The color of the shadow

C The blur amount of the shadow edges

D The size of the shape

Key Result

Inner shadow effect in Figma is created by applying a semi-transparent shadow inside a shape with specific offset, blur, and spread parameters to add depth and subtle shading.

Transcript

We start with a shape filled with a solid color. Then, we add an inner shadow using a semi-transparent black color. This shadow is offset inside the shape by 2 pixels horizontally and vertically. We soften the shadow edges by applying a blur of 4 pixels. The spread is zero, so the shadow size stays the same. Combining these steps results in a red rectangle with a subtle black inner shadow that adds depth and visual interest.