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.

Practice

1. What is the main purpose of using the Inner shadow effect in Figma designs?

easy

A. To change the background color of the canvas

B. To create a glowing outline around objects

C. To add depth inside shapes for a 3D look

D. To add a drop shadow outside the shape

Solution

1. Step 1: Understand the effect purpose

   Inner shadow is used to create a shadow inside the edges of a shape, giving it depth.

2. Step 2: Compare with other shadow types

   Unlike drop shadow which is outside, inner shadow is inside the shape, creating a 3D effect.

3. Final Answer:

   To add depth inside shapes for a 3D look -> Option C

4. Quick Check:

   Inner shadow = depth inside shape [OK]

Hint: Inner shadow = shadow inside shape edges [OK]

Common Mistakes:

• Confusing inner shadow with drop shadow
• Thinking it changes background color
• Assuming it creates outer glow

2. Which of the following is the correct way to adjust the Inner shadow effect in Figma?

easy

A. Use the stroke tool to add inner shadow

B. Only change the color of the shadow

C. Apply a gradient fill to create inner shadow

D. Change color, opacity, blur, and offset values

Solution

1. Step 1: Identify adjustable properties

   Inner shadow effect allows changing color, opacity, blur, and offset to customize appearance.

2. Step 2: Eliminate incorrect methods

   Stroke tool and gradient fill do not create inner shadows; only effect settings do.

3. Final Answer:

   Change color, opacity, blur, and offset values -> Option D

4. Quick Check:

   Adjust inner shadow with color, opacity, blur, offset [OK]

Hint: Adjust four settings: color, opacity, blur, offset [OK]

Common Mistakes:

• Trying to use stroke or fill for inner shadow
• Changing only color without blur or offset
• Confusing inner shadow with outer shadow settings

3. Given a rectangle with an inner shadow effect set to color black, opacity 50%, blur 10, and offset X=5, Y=5, what visual result will you see?

medium

A. A soft black shadow inside the bottom-right edges of the rectangle

B. A sharp black shadow outside the top-left edges of the rectangle

C. A glowing black outline around the rectangle

D. No visible shadow effect

Solution

1. Step 1: Analyze inner shadow parameters

   Color black with 50% opacity means a semi-transparent black shadow. Blur 10 makes it soft. Offset X=5, Y=5 moves shadow inside bottom-right edges.

2. Step 2: Understand shadow placement

   Inner shadow appears inside shape edges, offset moves it to bottom-right inside edges, so shadow is soft and inside bottom-right.

3. Final Answer:

   A soft black shadow inside the bottom-right edges of the rectangle -> Option A

4. Quick Check:

   Inner shadow offset inside bottom-right = soft black shadow inside edges [OK]

Hint: Offset moves shadow inside edges direction [OK]

Common Mistakes:

• Thinking shadow is outside shape edges
• Ignoring blur effect making shadow soft
• Confusing opacity with color darkness

4. You applied an inner shadow effect but it is not visible on your shape. What is the most likely reason?

medium

A. The shadow color opacity is set to 0%

B. The blur value is too high

C. The offset values are negative

D. The shape has no fill color

Solution

1. Step 1: Check opacity impact

   If shadow opacity is 0%, the shadow is fully transparent and invisible.

2. Step 2: Evaluate other options

   High blur softens shadow but does not hide it; negative offset moves shadow inside but still visible; no fill color does not hide inner shadow.

3. Final Answer:

   The shadow color opacity is set to 0% -> Option A

4. Quick Check:

   Opacity 0% = invisible shadow [OK]

Hint: Check opacity first if shadow is invisible [OK]

Common Mistakes:

• Assuming blur hides shadow completely
• Thinking negative offset removes shadow
• Believing fill color affects shadow visibility

5. You want to create a button with a subtle inner shadow that looks like it is pressed inward. Which combination of inner shadow settings is best?

hard

A. Color: white, Opacity: 80%, Blur: 20, Offset X: -10, Offset Y: -10

B. Color: dark gray, Opacity: 30%, Blur: 5, Offset X: 2, Offset Y: 2

C. Color: black, Opacity: 100%, Blur: 0, Offset X: 0, Offset Y: 0

D. Color: red, Opacity: 50%, Blur: 15, Offset X: 10, Offset Y: 10

Solution

1. Step 1: Understand pressed button look

   A subtle inner shadow uses a dark gray color with low opacity and small blur and offset to create a gentle depth effect.

2. Step 2: Evaluate options

   Color: dark gray, Opacity: 30%, Blur: 5, Offset X: 2, Offset Y: 2 fits subtle pressed look with low opacity and small offset. Color: white, Opacity: 80%, Blur: 20, Offset X: -10, Offset Y: -10 is too bright and large offset. Color: black, Opacity: 100%, Blur: 0, Offset X: 0, Offset Y: 0 is harsh with no blur. Color: red, Opacity: 50%, Blur: 15, Offset X: 10, Offset Y: 10 uses red which is unusual for shadow.

3. Final Answer:

   Color: dark gray, Opacity: 30%, Blur: 5, Offset X: 2, Offset Y: 2 -> Option B

4. Quick Check:

   Subtle inner shadow = low opacity, small blur, small offset [OK]

Hint: Use low opacity and small offset for subtle inner shadow [OK]

Common Mistakes:

• Using full opacity makes shadow harsh
• Using bright colors for inner shadow
• Setting zero blur makes shadow sharp and unnatural