Figma Effects for UI: Shadows, Blur, and Elevation Without Handoff Surprises

Quick answer

Elevation in Figma is usually drop shadow stacks (sometimes inner shadow or stroke). Define 3–5 levels (rest, raised, overlay, modal) as effect styles or variables, not one-off shadows per card. Use background blur for frosted glass nav; use layer blur sparingly on decorative layers—it does not export as a single CSS property for complex groups. Tie shadows to light and dark modes (dark mode tokens) and document CSS intent in Dev Mode (handoff checklist). For color pairing, see semantic color; more guides on Figma guides.

---

Who this is for

• UI designers standardizing cards, modals, and sticky headers.
• Design system maintainers migrating random shadows to tokens.
• Developers who receive PNGs when they needed box-shadow values.

---

Elevation scale: start with four levels

Level	Name	Typical use	Shadow character
0	elevation/0	Flat surfaces, dividers	None or hairline border
1	elevation/1	Cards, list items	Soft, low Y offset
2	elevation/2	Dropdowns, sticky subnav	Medium spread, clearer separation
3	elevation/3	Modals, popovers	Larger blur, higher opacity
4	elevation/4	Toasts on dimmed scrim	Strongest; pair with overlay fill

Verdict: if you have more than six distinct shadows in a product file, audit and merge—engineers will not implement fourteen box-shadow variants.

---

Drop shadow settings that map to CSS

Figma shadows use X, Y, blur, spread, color.

Figma field	CSS equivalent	Tip
X / Y	offset-x / offset-y	Keep Y positive for “light from above”
Blur	blur-radius	Double Figma blur ≈ CSS perception (test in browser)
Spread	spread-radius	Use sparingly; large spread looks “dirty” on retina
Color	color + alpha	Prefer #000 at 8–16% over heavy 40% black

Example stack (card / elevation-1)

Layer	X	Y	Blur	Spread	Color
1	0	1	2	0	#000000 6%
2	0	4	12	0	#000000 8%

Create once → Create style → name effect/elevation/1. Apply to components, not detached rectangles (components guide).

Common mistake: a single shadow with 40px blur and 50% black—looks fine in Figma, reads as mud in code and on OLED dark UI.

---

Inner shadow and strokes (secondary tools)

Effect	Use	Skip when
Inner shadow	Pressed buttons, inset fields, neumorphism (rare)	Default buttons—use fill + border tokens
Stroke	Hairline borders replace elevation-0 on dark mode	Replacing all shadows with 1px borders on light cards

For form fields, prefer border color tokens over inner shadow for focus rings—accessibility plugins catch contrast better on strokes (a11y plugins).

---

Background blur vs layer blur

Effect	What it blurs	UI pattern	Handoff
Background blur	Content behind the layer	Frosted header, sheet, glass panel	backdrop-filter: blur() + semi-transparent fill
Layer blur	The layer’s own pixels	Frosted illustration, avatar privacy	filter: blur() on exported asset

Glass nav (background blur)

1. Draw a frame over the scroll area; fill white at 72% (or dark equivalent).
2. Add effect Background blur → 16–24.
3. Add subtle elevation-1 shadow if the bar separates from content.

Dev note: “Implement as backdrop-filter + background: rgba(...); do not flatten unless supporting IE11.”

When layer blur breaks handoff

Applying layer blur to a group with text and icons forces engineers to flatten or rebuild. Restrict blur to single media layers or export explicit @2x assets.

---

Effect styles and variables (system workflow)

1. Build elevation on a neutral gray surface component.
2. Select shadow → Create style in the Effects section.
3. Publish styles in your team library.
4. When Figma supports effect variables in your plan, bind shadow opacity or color to mode-aware variables alongside color modes.

Maintenance cadence: review shadows quarterly when OS or brand guidelines change—same rhythm as quarterly Figma check-in.

---

Dark mode shadows

Light-mode shadows (black at low alpha) disappear on dark surfaces.

Mode	Shadow color	Surface
Light	#000 6–12%	White / gray-50 cards
Dark	#000 40%+ or lift with lighter border	Gray-900 cards
Dark (alt)	No shadow; 1px border white/8%	Dense dashboards

Mirror dark mode preview tricks—toggle modes on a single component set with different effect styles per mode, not duplicate detached cards.

---

Shadows with Auto Layout and interactive states

State	Elevation change
Default	elevation/1
Hover	elevation/2 or slightly stronger shadow
Pressed	elevation/0 + inner shadow optional
Focus	Ring stroke, not bigger shadow (interactive components)

Use component variants (state=hover) rather than manual effect edits on instances.

Common mistake: animating shadow in prototype only—engineers need token names, not a video of the hover.

---

Prototyping and performance

Heavy background blur on large frames slows browser Figma and prototype playback. For user testing, duplicate a “lite” variant without blur for low-end devices.

Animation limits apply—do not simulate physics with stacked blurs; use Smart Animate between discrete elevation tokens.

---

Export and asset pitfalls

Scenario	Recommendation
Marketing hero with blur	Export flattened PNG @2x (fix blurry exports)
Product card shadow	Spec CSS box-shadow in Dev Mode
SVG icon with shadow	Avoid—use CSS on the icon wrapper
PDF / print	Remove blur; use flat fills (print checklist)

---

Comparison: native effects vs plugins

Approach	Best for
Native effect styles	Product UI, libraries, Dev Mode
Plugins (batch rename, contrast)	Auditing legacy files—not inventing new shadow math
Figma AI / styles	Exploration only—normalize to tokens before publish

Plugin roundups for visual polish live on plugins hub; keep elevation native when possible so inspect values stay trustworthy.

---

Troubleshooting

Shadow looks clipped

Parent frame has clip content enabled—disable clip on the card or move shadow to an outer wrapper (masks vs clip).

Different shadow on instance

Instance overrides effect—reset from main component or swap variant.

Dev Mode shows unexpected values

Effects on nested groups compound. Flatten to one surface layer for inspect, or annotate intended CSS.

Glass effect not visible in prototype

Background has nothing to blur—place content under the blurred bar or use a placeholder image.

---

FAQ

How many shadows should a card have?

One or two layers in the stack is enough. More reads as noise and slows implementation.

Can I use Figma shadows for neumorphism?

You can, but accessibility and dark mode suffer. If brand requires it, isolate to marketing frames, not core product components.

Do shadows count for contrast checking?

Shadows do not fix text contrast—run accessibility plugins on text/background pairs, not shadow color.

Elevation vs z-index in code?

Elevation tokens should map to z-index + box-shadow` together in your design doc—Figma layer order alone is not enough for modals over scrims.

---

Recommended next steps

1. Audit your file for unique shadows; merge to four effect styles.
2. Add light/dark pairs and document CSS on the Specs page.
3. Pair with Dev Mode handoff and dev handoff plugins once tokens are stable.

Shadows are interface grammar—treat them like typography and spacing: a small set, named clearly, and enforced in the library.