Inner shadow effect in Figma - Deep Dive

Overview - Inner shadow effect

What is it?

The inner shadow effect is a visual style used in design tools like Figma to create a shadow that appears inside the edges of a shape or object. It gives the illusion that the object is recessed or has depth by darkening the inner borders. This effect helps make designs look more realistic and three-dimensional without adding extra shapes.

Why it matters

Inner shadows help designers communicate depth and layering clearly, making interfaces easier to understand and more visually appealing. Without inner shadows, designs can look flat and less engaging, which might confuse users or reduce the perceived quality of a product. This effect solves the problem of showing subtle depth without cluttering the design.

Where it fits

Before learning inner shadows, you should understand basic shape creation and layer styles in Figma. After mastering inner shadows, you can explore advanced effects like gradients, blurs, and combining multiple effects for richer visuals.

Mental Model

Core Idea

An inner shadow darkens the inside edges of an object to create the illusion of depth and recess.

Think of it like...

It's like pressing your finger lightly on the edge of a soft clay circle, making a shadow inside the dent that shows it’s pushed in.

┌───────────────┐
│               │
│   ████████    │  ← Inner shadow darkens edges inside
│  █        █   │
│  █ Object █   │
│  █        █   │
│   ████████    │
│               │
└───────────────┘

Build-Up - 7 Steps

1

Foundation

What is an Inner Shadow Effect

Concept: Introduce the basic idea of inner shadows as a design effect.

In Figma, an inner shadow is a style you apply to a shape that adds a shadow inside its edges. Unlike outer shadows that fall outside the shape, inner shadows make the edges look darker inside, creating a sense of depth.

Result

You see a shape with darker edges inside, making it look like it has a carved or inset border.

Understanding the difference between inner and outer shadows is key to controlling how depth is perceived in design.

2

Foundation

Applying Inner Shadows in Figma

Concept: Learn how to add and adjust inner shadows using Figma’s interface.

Select a shape, go to the Effects panel, click '+' and choose 'Inner shadow'. You can then adjust color, opacity, blur, and offset to control how the shadow looks inside the shape.

Result

The shape updates immediately with the inner shadow effect visible inside its edges.

Knowing where and how to apply inner shadows lets you experiment with depth quickly and visually.

3

Intermediate

Controlling Shadow Direction and Blur

🤔Before reading on: do you think changing the offset moves the shadow inside or outside the shape? Commit to your answer.

Concept: Learn how offset and blur control the shadow’s position and softness inside the shape.

Offset moves the shadow horizontally and vertically inside the shape’s edges, simulating light direction. Blur softens the shadow edges, making the depth look more natural or sharp.

Result

Adjusting offset and blur changes how deep or subtle the inner shadow appears, affecting the 3D illusion.

Understanding offset and blur helps you mimic real-world lighting and material textures in your designs.

4

Intermediate

Using Color and Opacity for Realism

🤔Before reading on: does a darker shadow color always mean a stronger depth effect? Commit to your answer.

Concept: Explore how shadow color and opacity affect the mood and realism of the inner shadow.

You can use black or dark colors for strong shadows, but sometimes tinted or lighter colors create subtle effects. Opacity controls transparency, so lower opacity makes the shadow softer and less obvious.

Result

By tweaking color and opacity, you can create shadows that look like soft dents or hard grooves.

Knowing how color and opacity influence perception prevents overdoing shadows and keeps designs balanced.

5

Intermediate

Combining Multiple Inner Shadows

Concept: Learn to layer several inner shadows for complex depth effects.

Figma allows adding multiple inner shadows on one shape. By stacking shadows with different offsets, blurs, and colors, you can simulate layered textures or lighting from multiple sources.

Result

The shape shows richer, more detailed depth that looks more realistic or stylized.

Mastering multiple shadows unlocks advanced visual styles beyond simple depth.

6

Advanced

Performance and Usability Considerations

🤔Before reading on: do you think many inner shadows slow down Figma or affect file size? Commit to your answer.

Concept: Understand how inner shadows impact design performance and user experience.

Using many or heavy inner shadows can increase file size and slow rendering, especially on complex projects or low-power devices. Designers balance visual richness with performance by limiting effects or simplifying shadows.

Result

You learn to create visually appealing designs that remain fast and responsive.

Knowing performance tradeoffs helps you design efficiently for real users and devices.

7

Expert

Inner Shadows in Design Systems and Accessibility

🤔Before reading on: do inner shadows always improve accessibility by adding depth? Commit to your answer.

Concept: Explore how inner shadows fit into design systems and affect accessibility.

Design systems use inner shadows consistently to maintain visual language. However, excessive shadows can reduce contrast or confuse users with low vision. Experts balance shadows with accessibility guidelines, testing contrast and clarity.

Result

You create designs that are both beautiful and usable by all people.

Understanding accessibility limits prevents design choices that harm user experience despite good visuals.

Under the Hood

Inner shadows work by rendering a blurred, offset shape mask inside the original shape’s boundaries. The effect uses alpha blending to darken pixels inside the edges without affecting the shape’s fill. This creates a visual cue of depth by simulating how light would cast shadows inward on a recessed surface.

Why designed this way?

Inner shadows were designed to give designers a simple, efficient way to add depth without extra layers or complex 3D modeling. The effect balances visual richness with performance, using GPU-accelerated blur and compositing. Alternatives like 3D rendering are heavier and less flexible for UI design.

┌───────────────┐
│   Shape Fill  │
│  ┌─────────┐  │
│  │ Shadow  │  │  ← Blurred, offset mask inside shape edges
│  │  Mask   │  │
│  └─────────┘  │
│               │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does an inner shadow always make an object look raised? Commit to yes or no.

Common Belief: Inner shadows always make objects look raised or popping out.

Reality: Inner shadows actually make objects look recessed or pushed inward, not raised.

Why it matters: Confusing inner shadows with outer shadows can lead to designs that send the wrong visual message about interactivity or layering.

Quick: Can you create inner shadows by just using outer shadows with negative offsets? Commit to yes or no.

Common Belief: You can fake inner shadows by using outer shadows with negative offsets.

Reality: Outer shadows only appear outside the shape; negative offsets move shadows outside or inside but do not clip inside edges, so they cannot replicate true inner shadows.

Why it matters: Trying to fake inner shadows this way wastes time and results in incorrect visuals that break design consistency.

Quick: Does increasing blur always make the inner shadow look deeper? Commit to yes or no.

Common Belief: More blur always means a deeper, stronger inner shadow effect.

Reality: Increasing blur softens the shadow edges, making the shadow look more subtle and less deep, not stronger.

Why it matters: Misunderstanding blur leads to over-soft shadows that fail to communicate depth clearly.

Quick: Are inner shadows purely decorative with no impact on usability? Commit to yes or no.

Common Belief: Inner shadows are just decoration and don’t affect user experience.

Reality: Inner shadows can improve usability by visually grouping elements and indicating layering or interactivity.

Why it matters: Ignoring the functional role of inner shadows can cause missed opportunities to enhance clarity and user guidance.

Expert Zone

1

Inner shadows interact differently with transparent fills versus solid fills, affecting how depth is perceived.

2

The order of multiple inner shadows changes the final look, as shadows blend cumulatively inside the shape.

3

Inner shadows can cause unexpected color shifts when combined with blend modes or gradients, requiring careful testing.

When NOT to use

Avoid inner shadows when designing flat or minimalistic interfaces where simplicity and clarity are priorities. Instead, use color contrast or spacing to indicate depth. Also, avoid heavy inner shadows in accessibility-focused designs where contrast must be maximized.

Production Patterns

In production, inner shadows are often standardized in design systems as reusable styles for buttons, input fields, and cards to maintain consistent depth cues. Designers use them sparingly to highlight active or focused states without overwhelming the interface.

Connections

Light and Shadow in Photography

Builds-on similar principles of how light creates shadows to show depth.

Understanding how real light casts shadows helps designers create believable inner shadows that mimic natural depth cues.

Human Visual Perception

Builds-on how the brain interprets shading and contrast to perceive 3D shapes.

Knowing how people perceive shadows guides effective use of inner shadows to communicate shape and layering.

User Interface Design Principles

Builds-on visual hierarchy and affordance concepts to improve usability.

Inner shadows support UI principles by visually grouping elements and indicating interactivity, enhancing user understanding.

Common Pitfalls

#1 Applying inner shadows with too high opacity making the shape look dirty or heavy.

Wrong approach:

Effect: Inner shadow; Color: black; Opacity: 100%; Blur: 10; Offset X: 0; Offset Y: 0

Correct approach:

Effect: Inner shadow; Color: black; Opacity: 30%; Blur: 10; Offset X: 0; Offset Y: 0

Root cause:

Misunderstanding that inner shadows should be subtle to simulate natural depth rather than strong dark overlays.

#2 Using large offset values that push the shadow too far inside, clipping important shape details.

Wrong approach:

Effect: Inner shadow; Offset X: 20; Offset Y: 20; Blur: 5

Correct approach:

Effect: Inner shadow; Offset X: 3; Offset Y: 3; Blur: 5

Root cause:

Not realizing that large offsets move shadows beyond natural edges, breaking the illusion of depth.

#3 Trying to create inner shadows on vector strokes instead of fills, resulting in no visible effect.

Wrong approach:

Applying inner shadow effect only on stroke layer of a shape.

Correct approach:

Apply inner shadow effect on the fill layer or the whole shape group.

Root cause:

Confusing how effects apply to fills versus strokes in vector shapes.

Key Takeaways

Inner shadows create the illusion of depth by darkening the inside edges of shapes, making them look recessed.

Adjusting offset, blur, color, and opacity controls the direction, softness, and strength of the inner shadow effect.

Multiple inner shadows can be combined for complex depth but should be used carefully to avoid performance issues.

Inner shadows support usability by visually grouping elements and indicating layering, but must be balanced with accessibility needs.

Understanding the mechanism and design purpose of inner shadows helps create realistic, clear, and efficient designs.