Inner shadow effect in Figma - Step-by-Step Guide

Introduction

The inner shadow effect adds a shadow inside the edges of a shape or frame. It helps create depth and makes elements look inset or pressed, improving visual appeal and focus in your designs.

When you want to make buttons look pressed or inset on a dashboard

When highlighting a selected card or panel by adding depth inside its border

When creating a 3D effect on charts or data visuals to separate layers

When designing input fields that appear sunken for better user focus

When adding subtle texture inside shapes to improve visual hierarchy

Steps

Step 1: Select the shape or frame

- Canvas or Layers panel

The selected object is highlighted and its properties appear in the right sidebar

Step 2: Click the Effects section

- Right sidebar under Design tab

The Effects panel expands showing current effects or empty if none

Step 3: Click the '+' button next to Effects

- Effects section in the right sidebar

A new effect is added with default Drop shadow settings

Step 4: Change the effect type to Inner shadow

- Effect type dropdown in the Effects section

The shadow moves inside the shape edges, visible on the canvas

Step 5: Adjust the shadow properties like color, opacity, blur, and offset X/Y

- Effects section controls

The inner shadow updates in real time on the selected object

Step 6: Click outside the sidebar to close the Effects panel

- Anywhere outside the right sidebar

The sidebar remains visible but the effect controls collapse

Before vs After

Before

A flat rectangle shape with solid fill color and no shadow

After

The same rectangle shows a subtle dark shadow inside its edges, creating a pressed look

Settings Reference

Effect type

📍 Effects section in the right sidebar

Selects the type of shadow or blur effect to apply

Default: Drop shadow

Color

📍 Effects section under Inner shadow settings

Sets the color and transparency of the inner shadow

Default: Black with 50% opacity

Blur

📍 Effects section under Inner shadow settings

Controls how soft or sharp the inner shadow edges appear

Default: 4 pixels

Offset X and Y

📍 Effects section under Inner shadow settings

Moves the inner shadow horizontally and vertically inside the shape

Default: 0 pixels for both

Opacity

📍 Effects section under Inner shadow settings

Controls the transparency of the inner shadow

Default: 50%

Common Mistakes

Applying inner shadow to a shape with no fill color

Inner shadow is not visible without a fill because it appears inside the shape edges

Ensure the shape has a fill color before adding an inner shadow

Setting offset values too large

Large offsets can push the shadow outside the shape or create unnatural effects

Use small offset values to keep the shadow subtle and inside the edges

Using very high blur with high opacity

This can make the shadow look like a fuzzy border instead of a shadow

Balance blur and opacity for a natural inner shadow effect

Summary

Inner shadow adds depth by placing a shadow inside shape edges.

Use it to create pressed or inset looks for UI elements.

Adjust color, blur, offset, and opacity for subtle effects.

Make sure the shape has a fill color to see the shadow.

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