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

Introduction

The drop shadow effect adds a soft shadow behind objects to create depth and make elements stand out. It helps highlight important parts of your dashboard or report visuals by giving a subtle 3D look.

When you want to make a button or card visually pop on your dashboard

When you need to separate overlapping charts or visuals clearly

When you want to add depth to icons or images for better focus

When you want to create a layered look for grouped elements

When you want to improve readability by lifting text or shapes off the background

Steps

Step 1: Select the object

- Canvas or Layers panel

The object is highlighted and ready for editing

Step 2: Click the Effects section

- Right sidebar panel

The Effects panel expands showing available effects

Step 3: Click the '+' button

- Effects section in the right sidebar

A new effect is added with default settings

Step 4: Select 'Drop shadow' from the effect type dropdown

- New effect settings in the Effects panel

The drop shadow effect is applied to the object

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

- Drop shadow settings in the Effects panel

The shadow changes visually on the object in real time

Step 6: Toggle the visibility icon to turn the shadow on or off

- Effects panel next to the drop shadow effect

The shadow appears or disappears on the object

Before vs After

Before

A flat blue rectangle with no shadow

After

The same rectangle with a soft black drop shadow offset slightly down and right, creating depth

Settings Reference

Effect type

📍 Effects panel in the right sidebar

Choose the type of visual effect to apply

Default: Drop shadow

X offset

📍 Drop shadow settings

Moves the shadow left or right

Default: 0

Y offset

📍 Drop shadow settings

Moves the shadow up or down

Default: 4

Blur

📍 Drop shadow settings

Controls how soft or sharp the shadow edges are

Default: 8

Color

📍 Drop shadow settings

Sets the shadow color and transparency

Default: Black with 25% opacity

Common Mistakes

Setting the shadow color fully opaque black

This makes the shadow too harsh and unrealistic

Use a black color with reduced opacity (around 20-30%) for a natural shadow

Using very large blur values

The shadow becomes too fuzzy and loses definition

Use moderate blur values (5-15) to keep the shadow soft but visible

Applying drop shadow to very small or thin objects

The shadow can look messy or overpower the object

Use subtle shadows or avoid shadows on very small elements

Summary

Drop shadow adds depth by placing a soft shadow behind objects.

Adjust offset, blur, and color to create a natural look.

Use shadows carefully to enhance focus without clutter.