Figma Linear Gradient to CSS Plugin: Convert Fills to CSS

Quick answer: Select one Figma layer, open Figma Gradient Linear to CSS, and copy the generated background declaration. The plugin converts visible solid fills and linear gradients—including gradient angle, color stops, positions, opacity, and layered fills—into CSS you can paste into a stylesheet.

Moving a Figma fill into CSS usually means translating a color, checking opacity, rebuilding a linear-gradient angle, and copying every stop position. It becomes more error-prone when a design layer uses several fills to create a layered background.

Figma Gradient Linear to CSS is a focused design-to-code plugin for that handoff. It reads the visible supported fills from one selected layer and generates a CSS background declaration that you can copy directly into your project.

Open Figma Gradient Linear to CSS in the Figma Community

What the Figma Linear Gradient to CSS plugin supports

The plugin reads the fills on one selected Figma layer and exports these visible paint types:

• Solid fills as a CSS color.
• Linear gradients as CSS linear-gradient(...) values.
• Multiple supported fills as comma-separated CSS background layers.

It preserves the values that matter for visual fidelity:

• Gradient angle, derived from the Figma gradient transform.
• Each color stop and its position.
• Fill and stop opacity.
• Layer order for supported background fills.

The current plugin is deliberately limited to solid and linear-gradient fills. Radial, angular, diamond, image, and video fills are not exported as CSS by this plugin.

How to convert a Figma fill to CSS

1. Select one layer in Figma

Select the frame, component, shape, or other individual layer that owns the background you want to export. The plugin generates code for one selected layer at a time, rather than combining unrelated elements from a multi-layer selection.

For the clearest result, choose the layer that has the fill itself. For example, select the card surface rather than its parent frame when the card owns the gradient.

2. Open the Figma Gradient Linear to CSS plugin

Open the plugin from Figma’s Resources panel or Plugins menu. If no layer is selected, the code panel asks you to select one layer before copying is enabled.

The result updates when you change the Figma selection or edit the document. That makes it convenient to compare several components or adjust a gradient stop while keeping the CSS panel open.

3. Review the generated background declaration

For a simple solid fill, the output is a standard CSS background color:

background: #2563EB;

For a linear gradient, the plugin exports an angle followed by its stops and positions:

background: linear-gradient(90deg, #2563EB 0%, #7C3AED 50%, #06B6D4 100%);

For a translucent fill or stop, it uses rgba(...) so the exported background retains opacity:

background: linear-gradient(135deg, rgba(37, 99, 235, 80%) 0%, rgba(6, 182, 212, 35%) 100%);

4. Copy the CSS into your stylesheet

Click the copy button, then paste the full declaration inside the selector for the matching element:

.hero-card {
  border-radius: 24px;
  background: linear-gradient(90deg, #2563EB 0%, #7C3AED 50%, #06B6D4 100%);
}

Because the plugin copies the whole background: declaration, you do not need to reconstruct the angle or each color stop manually.

How Figma linear gradients map to CSS

The CSS direction is calculated from Figma’s gradient transform, so it is better to use the copied angle as your starting point than to guess a direction such as to right. Preview it in your browser with the same element dimensions before making design adjustments.

Exporting layered Figma backgrounds

Figma layers can have more than one fill. When a selected layer has several visible supported fills, the plugin writes them as CSS background layers separated by commas:

background:
  linear-gradient(180deg, rgba(255, 255, 255, 0%) 0%, rgba(15, 23, 42, 45%) 100%),
  linear-gradient(90deg, #2563EB 0%, #06B6D4 100%);

CSS draws the first listed background layer on top. Keep that order when you paste the result. A semi-transparent overlay is commonly placed above a colorful gradient to improve text contrast.

When a solid fill is part of a layered Figma background, the plugin represents it as a two-stop linear-gradient(...) with the same color at both ends. This keeps all fills in a consistent comma-separated CSS background format.

Tips for accurate Figma-to-CSS gradients

• Select the actual layer that owns the fill, rather than a parent container with no paint.
• Keep stop positions intact first; moving them can change the visual balance more than changing a color.
• Compare the exported CSS at the same component size as the Figma layer. Gradients can feel different on a much taller, wider, or clipped element.
• Check any semi-transparent stop on the real page background. Opacity is preserved, but the result depends on what sits behind the element.
• Use a reusable custom property when the same background is shared across several components.

For example:

:root {
  --brand-surface: linear-gradient(90deg, #2563EB 0%, #7C3AED 50%, #06B6D4 100%);
}

.hero-card,
.feature-card {
  background: var(--brand-surface);
}

What to do when your fill is not supported

The plugin handles solid fills and linear gradients. If your selected layer uses a radial, angular, diamond, image, or video fill, create the CSS manually or use a tool designed for that paint type.

For a color-focused workflow, Figma Name That Color identifies selected colors and exports CSS custom properties, Jetpack Compose values, and Android XML resources. To export a layer’s visible drop and inner shadows, use the Figma Box Shadow to CSS Plugin.

Frequently asked questions

Does the plugin support more than one Figma fill?

Yes. It can export multiple visible supported fills as comma-separated CSS background layers, preserving their order.

Does it preserve gradient opacity?

Yes. Opaque colors are output as hex values, while colors with transparency are output as rgba(...) values so alpha is retained.

Does the plugin support radial or angular gradients?

No. The current implementation exports solid fills and linear gradients only.

Why does the copied output use a linear-gradient for a solid color?

When the solid fill is combined with other background layers, the plugin represents that color as a gradient with the same color at both stops. This lets CSS layer it consistently alongside the other fills.

Can I use the generated background in Tailwind CSS?

Yes. The output is standard CSS. Paste it into a component stylesheet or use it as the source value for a custom Tailwind utility or theme token.

Turn Figma gradients into production-ready CSS

Figma Gradient Linear to CSS shortens a repetitive part of design handoff: select the layer, inspect the generated CSS, and copy the visible solid and linear-gradient fills into your project. It preserves the details that are easy to lose during manual conversion while leaving you in control of how the result becomes a reusable design token.

Try Figma Gradient Linear to CSS and move from a Figma background to CSS with fewer manual steps.