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.