Figma SVG Shadows Missing? Fix Filters, Bounds, and Export Settings

Your Figma design has a soft card shadow, glowing icon, or tiny depth effect that makes the asset feel finished. Then you export SVG and the shadow disappears. Or it gets chopped at the edge. Or it works as a file but breaks after React conversion or minification.

The fast rule:

If a Figma SVG shadow is missing, check bounds and filters before redesigning the asset. Most failures come from a tight export frame, a missing <filter> definition, a broken filter="url(#...)" reference, or a target platform that strips SVG filters.

If the whole file is blank or cropped, start with the Figma SVG export troubleshooting guide. If gradients or masks are also involved, use the Figma SVG gradient fix and Figma clipping mask fix. Once the shadow renders correctly, run only conservative cleanup with SVG Optimizer and compare the result in SVG Editor.

Why is my Figma SVG shadow missing after export?

A Figma SVG shadow usually goes missing because the exported SVG no longer contains a working filter relationship. The visible shape needs a filter="url(#shadowId)" reference, and the SVG needs a matching <filter id="shadowId"> definition. If either side is missing, renamed, stripped, clipped, or unsupported, the shadow will not render.

An SVG filter is a reusable visual effect definition. It often lives inside <defs>, gets referenced by ID, and can create shadows, blur, glow, color shifts, and compositing effects without turning the whole asset into pixels.

Useful references:

• MDN: SVG filters
• MDN: feDropShadow
• MDN: filter element
• Figma export formats and settings

The healthy pattern looks like this:

<svg viewBox="0 0 160 96" xmlns="http://www.w3.org/2000/svg">
  <rect x="24" y="20" width="112" height="56" rx="14" fill="#ffffff" filter="url(#cardShadow)" />
  <defs>
    <filter id="cardShadow" x="0" y="0" width="160" height="96" filterUnits="userSpaceOnUse">
      <feDropShadow dx="0" dy="8" stdDeviation="10" flood-color="#0f172a" flood-opacity="0.18" />
    </filter>
  </defs>
</svg>

The rectangle is visible on its own, but the shadow depends on cardShadow. If an export, sanitizer, React conversion, or optimizer changes the ID without updating the reference, the shape survives and the effect vanishes.

What is the fastest way to diagnose a broken Figma SVG shadow?

The fastest diagnosis is to test the SVG in three layers: Figma source, raw exported file, and final embed context. That prevents you from fixing React code when the Figma frame is too tight, or flattening artwork when the real problem is an optimizer removing filters.

Use this decision table:

Symptom	Most Likely Cause	First Fix
Shadow missing in the raw SVG file	Figma exported no usable filter or rasterized the effect	Re-export a simpler effect or flatten intentionally
Shadow appears but is cut off	Export frame or filter region is too tight	Expand the frame and filter bounds
Shadow works alone but fails in React	Duplicate filter IDs or JSX attribute conversion	Prefix IDs and convert attributes
Shadow disappears after optimization	Optimizer removed defs or changed IDs	Preserve filters and referenced IDs
Shadow disappears in a CMS/upload preview	Sanitizer strips filter elements	Use <img> delivery, simplify, or flatten the effect
File size explodes	Shadow was rasterized or traced into many shapes	Rebuild as a simpler vector or use a raster image where appropriate

Search the SVG for these strings:

filter="url(#
<filter
feDropShadow
feGaussianBlur
feOffset
feMerge
id=

If filter="url(#dropShadow)" exists but id="dropShadow" does not, the reference is broken. If the filter exists but uses a tiny region such as x="0" y="0" width="100%" height="100%", the blur may be clipped at the SVG edge.

How do I fix an SVG shadow that gets cut off?

Fix a cut-off SVG shadow by giving the effect enough space. In Figma, expand the export frame so the blur and offset sit inside the exported bounds. In SVG code, make sure the filter region is larger than the shape when the shadow extends outside the object's box.

Start in Figma:

1. Duplicate the asset into an export-only frame.
2. Turn on outlines or a contrasting background so the shadow edge is visible.
3. Expand the frame by at least the shadow blur radius plus offset.
4. Avoid exporting only the inner shape if the visual effect extends outside it.
5. Export SVG at 1x and open the file directly in a browser.

Then inspect the filter:

<!-- Risky: the filter region may clip the blur -->
<filter id="shadow" x="0" y="0" width="100%" height="100%">
  <feDropShadow dx="0" dy="10" stdDeviation="8" />
</filter>

Give the filter breathing room:

<filter id="shadow" x="-24" y="-24" width="208" height="144" filterUnits="userSpaceOnUse">
  <feDropShadow dx="0" dy="10" stdDeviation="8" flood-color="#111827" flood-opacity="0.2" />
</filter>

For icons, keep this boring: if the icon's actual geometry is 24 by 24 but the shadow extends 6 pixels below it, the viewBox or filter region needs to account for that visual edge. The SVG icon cut-off fix covers the same idea for strokes, viewBox padding, and rotated shapes.

Should I keep Figma shadows as SVG filters or flatten them?

Keep Figma shadows as SVG filters when the effect is simple, the file is used on the web, and you need scalability, editability, or theme control. Flatten the shadow when the destination strips filters, exact appearance matters more than editable code, or the effect is complex enough that the exported SVG becomes fragile.

Use this choice:

Use Case	Keep SVG Filter	Flatten or Rasterize
Website icon with subtle shadow	Yes	No
App illustration with several soft glows	Maybe	Maybe
Logo master file	Usually no shadow	Avoid effect-heavy master
CMS upload that strips filters	No	Yes
Email marketing graphic	No	Usually yes
React component with themeable hover states	Yes, if IDs are stable	No
Print handoff or social graphic	Not necessary	Often yes

A shadow that exists only to make a screenshot-like card feel nice can often be flattened. A shadow that is part of an interactive UI component, icon system, or design token should stay as a real effect if your delivery path supports it.

This is also where file-format discipline matters. If the final asset is a detailed marketing illustration with lots of blur, texture, and glow, SVG may not be the best final format. Use the SVG vs PNG comparison before forcing every soft effect into vector markup.

How do I fix Figma SVG shadows in React?

Fix Figma SVG shadows in React by preserving the <defs> block, converting SVG attributes to JSX names, and making filter IDs unique when components render multiple times. React does not make SVG filters impossible, but inline SVG turns ID hygiene into your responsibility.

Raw exported SVG may include:

<g filter="url(#filter0_d_42_18)">
  <rect x="20" y="20" width="80" height="44" rx="12" fill="white" />
</g>
<defs>
  <filter id="filter0_d_42_18" x="0" y="0" width="120" height="84" filterUnits="userSpaceOnUse">
    <feDropShadow dx="0" dy="8" stdDeviation="8" flood-opacity="0.18" />
  </filter>
</defs>

In JSX, keep the relationship but use a unique ID:

export function ShadowCardIcon({ title = "Card icon" }) {
  const shadowId = "shadow-card-icon-filter";

  return (
    <svg viewBox="0 0 120 84" role="img" aria-label={title}>
      <g filter={`url(#${shadowId})`}>
        <rect x="20" y="20" width="80" height="44" rx="12" fill="white" />
      </g>
      <defs>
        <filter id={shadowId} x="0" y="0" width="120" height="84" filterUnits="userSpaceOnUse">
          <feDropShadow dx="0" dy="8" stdDeviation="8" floodOpacity="0.18" />
        </filter>
      </defs>
    </svg>
  );
}

What matters:

• filter="url(#...)" still points to the filter ID.
• flood-opacity becomes floodOpacity.
• The defs block stays inside the same SVG.
• The ID will not collide with another copied Figma export.
• The viewBox includes the full shadow region.

If the SVG is static and appears many times, consider serving it as a normal image file instead of inlining it. The inline SVG vs img tag guide explains when DOM control is worth the extra ID and security surface.

What SVG optimizer settings protect shadows?

The safest optimizer settings protect referenced definitions first and shrink code second. Filters depend on IDs, filter regions, color values, opacity, and primitive order. Aggressive cleanup can remove the exact pieces that make a Figma shadow render.

Start with safe cleanup:

• Remove comments.
• Remove editor metadata.
• Collapse whitespace.
• Keep the viewBox.
• Keep defs.
• Preserve filter, mask, clip path, and gradient IDs.
• Avoid merging paths before visual testing.
• Reduce precision conservatively.
• Compare original and optimized SVG in the final embed context.

Be careful with these:

Optimizer Action	Shadow Risk	Safer Move
Remove unused defs	Can delete filters that look unused to the optimizer	Disable until references are verified
Cleanup IDs	Can break filter="url(#...)"	Preserve IDs or update references together
Collapse groups	Can detach filter from the intended shape	Compare before accepting
Reduce precision aggressively	Can shift blur bounds or shape edges	Use modest precision
Remove unknown elements	Can strip filter primitives	Do not use on filter-heavy artwork blindly

If the file is huge because the shadow was rasterized, optimization will not fix the root issue. Re-export a simpler vector effect, flatten intentionally, or use Image to SVG only when the source is a clean raster mark with hard edges. Shadows are usually not good tracing targets.

What is the safest Figma SVG shadow checklist?

The safest checklist is to decide whether the shadow should remain an editable SVG effect, then protect the filter reference through export, cleanup, conversion, and delivery. That turns a vague "Figma export bug" into a few concrete checks.

Use this before shipping:

• Decide whether the shadow is functional, decorative, or disposable.
• Expand the Figma export frame for blur and offset.
• Export the smallest frame that still includes the full visual edge.
• Open the raw SVG directly in a browser.
• Search for filter="url(#.
• Confirm every referenced filter ID exists.
• Check filter region padding if the shadow is clipped.
• Keep defs during cleanup.
• Prefix filter IDs for inline React components.
• Test as the final embed type: file, inline SVG, React component, CMS upload, CSS background, or email.
• Optimize only after the unoptimized file renders correctly.

If you need the fastest repair path, open the broken file in SVG Validator, then preview edits in SVG Editor. If the asset is a logo or icon that should not depend on soft effects, simplify it and convert a cleaner source with SVG Genie.

FAQ

Why is my Figma SVG shadow missing after export?

A Figma SVG shadow is usually missing because the shadow extends outside the exported bounds, the target renderer strips or breaks the filter definition, an optimizer removes required defs, or Figma rasterizes a complex effect instead of exporting it as editable SVG.

Can SVG support drop shadows?

Yes. SVG supports drop shadows through filter effects such as feDropShadow or a filter made from feGaussianBlur, feOffset, feFlood, feComposite, and feMerge. The filter must stay in the SVG and the visible element must reference it with filter="url(#id)".

Should I flatten shadows before exporting SVG from Figma?

Flatten shadows only when the shadow is decorative, exact visual fidelity matters more than editability, or the target platform strips SVG filters. Keep the effect as SVG filter when the file must stay scalable, themeable, and lightweight.

Why does my SVG shadow get cut off?

SVG shadows get cut off when the export frame or filter region is too tight. Expand the Figma frame before export and make sure the SVG filter has enough x, y, width, and height padding for the blur and offset.

How do I fix SVG shadows in React?

Keep the defs block, prefix filter IDs when multiple inline SVG components render on the same page, convert attributes to JSX names, and test the component where it ships. If the effect is decorative, using the SVG as an img file can avoid ID collisions.

Next step

Open the Figma SVG in SVG Validator, search for filter="url(#, and confirm every filter reference resolves. Then preview the repaired file in SVG Editor and run SVG Optimizer only after the shadow renders correctly.