Figma Box Shadow to CSS Plugin: Export Drop and Inner Shadows

Quick answer: Select one Figma layer, open Figma drop and inner shadow to CSS box shadow, and copy the generated declaration. The plugin turns visible drop shadows and inner shadows into a CSS box-shadow value with the correct offsets, blur, spread, color, opacity, and inset keyword.

Recreating a Figma shadow in CSS is simple in theory but easy to get subtly wrong. You need the horizontal and vertical offsets, blur radius, spread, color, opacity, and, for an inner shadow, the inset modifier. Copying those values by hand for every component slows down handoff and invites small visual differences.

Figma drop and inner shadow to CSS box shadow reads the shadow effects from one selected Figma layer and presents a copy-ready CSS declaration. It is a focused way to move from a design effect to code without manually translating every property.

Open the Figma box-shadow plugin in the Figma Community

What this Figma box-shadow plugin exports

The plugin reads the current selection and includes only visible effects of these two types:

• Drop shadow becomes a regular CSS shadow.
• Inner shadow becomes a CSS shadow prefixed with inset.

For every supported effect, the CSS output contains the Figma values in this order:

box-shadow: offset-x offset-y blur-radius spread-radius color;

For example, a design layer with a soft, semi-transparent drop shadow can become:

box-shadow: 0px 8px 24px 0px rgba(15, 23, 42, 18%);

An inner shadow uses the same values with inset at the beginning:

box-shadow: inset 0px 1px 2px 0px rgba(15, 23, 42, 20%);

Opaque shadow colors are exported as hex values. Shadows with transparency are exported as rgba(...), preserving the alpha that makes the effect look soft in Figma.

How to use the Figma drop and inner shadow to CSS box shadow plugin

1. Select one layer with a shadow

In Figma, select the frame, component, shape, or other individual layer whose shadow you want to reproduce in CSS. The plugin is designed around a single selected layer, so it does not generate a combined declaration from multiple unrelated layers.

Choose the painted element itself. For example, select the card that owns the drop shadow rather than only its parent frame.

2. Open the plugin

Open Figma drop and inner shadow to CSS box shadow from the Resources panel or Plugins menu. If you have not selected a layer, the code area asks you to select one layer before copying is available.

Once a layer is selected, the plugin watches the selection and document changes. You can select another component or adjust an effect in Figma to refresh the generated CSS without reopening the plugin.

3. Check the generated box-shadow declaration

The code panel displays the generated CSS and highlights it as CSS code. It includes only visible drop and inner shadows; other Figma effect types are not turned into a box-shadow value.

When a layer contains several supported shadows, CSS separates them with commas. Review the result before pasting it into a shared component: multiple soft shadows can be intentional, but they can also be more expensive to render than one simple shadow.

4. Copy and paste the CSS

Click the copy button, then paste the declaration into the selector that styles the corresponding element:

.profile-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0px 8px 24px 0px rgba(15, 23, 42, 18%);
}

The plugin copies the full box-shadow: declaration, so you can paste it directly inside a CSS rule. If you use CSS custom properties for your visual tokens, keep the shadow value reusable:

:root {
  --card-elevation: 0px 8px 24px 0px rgba(15, 23, 42, 18%);
}

.profile-card {
  box-shadow: var(--card-elevation);
}

How Figma shadow properties map to CSS

This mapping matters when you review the output. CSS uses the same core shadow concepts as Figma, but a value can look different if the target element’s background, border radius, size, or clipping differs from the design layer.

Drop shadow versus inner shadow in CSS

A drop shadow sits outside the element’s box and helps separate a card, button, dialog, or floating control from its background:

.floating-action {
  box-shadow: 0px 12px 32px 0px rgba(15, 23, 42, 24%);
}

An inner shadow is rendered inside the box. It can add a pressed, recessed, or inset-field effect:

.inset-control {
  box-shadow: inset 0px 2px 4px 0px rgba(15, 23, 42, 18%);
}

Use inner shadows sparingly. They can be useful for a deliberate visual language, but a subtle border or surface-color change is often clearer and more accessible for form fields and interactive states.

Tips for accurate Figma-to-CSS shadows

• Keep the element’s border-radius consistent between Figma and CSS. Rounded corners change how a shadow is perceived.
• Check the CSS against the same background color used in the design. A translucent black shadow can look much stronger on a light surface than on a tinted one.
• Do not hide a shadow in Figma if you expect it in the CSS output; the plugin exports visible drop and inner shadows only.
• Use the copied values as the visual starting point, then test in the browser at real component sizes.
• Prefer a named custom property when several components share the same elevation treatment.

For a related workflow, Figma Name That Color exports selected Figma colors as CSS variables, Jetpack Compose values, and Android XML resources. The Figma Solid and Gradient to CSS guide covers fills and gradient code.

Frequently asked questions

Does the plugin support multiple shadows?

It can generate comma-separated CSS values for visible drop and inner shadows on the selected layer. Check the final declaration in your browser to confirm it matches the intended component.

Does it export hidden Figma shadows?

No. The plugin filters out effects that are not visible, so the generated CSS represents the shadows currently enabled on the layer.

Does it support blur, spread, and opacity?

Yes. The generated declaration includes the X/Y offsets, blur radius, spread radius, and color. Transparent colors are exported as rgba(...) values with their opacity retained.

Can I use the output in Tailwind CSS?

Yes. The copied declaration is standard CSS. Use it in a component stylesheet, in a custom CSS class, or as the source value when defining a custom Tailwind shadow token.

Copy Figma shadows without manual conversion

The Figma drop and inner shadow to CSS box shadow plugin takes one tedious handoff task off your plate. Select the layer, review the CSS, and copy a shadow declaration that preserves the values used in your design. That leaves you free to focus on the component’s layout, states, and visual consistency.

Try the Figma box-shadow plugin for faster design-to-code shadow handoff.