Free tool

Figma Gradient → CSS Converter

Paste a Figma gradient fill (JSON) and get exact CSS — linear, radial or conic, with correct angles and stops. Free.

Use the tool ↓ See ready→made

Figma's API gives you gradients as normalized handles or a transform matrix — not CSS. This free tool runs the exact conversion math (aspect-ratio-correct angles, renormalized stops) in your browser. It reads Plugin-API fills (gradientTransform) and REST-API fills (gradientHandlePositions) alike. The formulas are documented in our gradient conversion guide.

Width/height matter: Figma handles are normalized to the element’s box, so the CSS angle depends on its aspect ratio.

Where do I get the gradient JSON?

  • Figma desktop console (no code required): open Plugins → Development → Show/Hide console, select the layer with the gradient, then run
    copy(JSON.stringify(figma.currentPage.selection[0].fills))
    — the fill JSON is now on your clipboard. Paste it above.
  • REST API: fills returned by GET /v1/files/:key/nodes already contain gradientHandlePositions — paste the fill object directly.
  • Plugin API: pass node.fills[i] — the tool reads the gradientTransform matrix and inverts it for you.
From the makers of ready→made

Converting more than a gradient?

ready→made runs this engine on your whole Figma design — layout, typography, gradients — straight into Gutenberg, Oxygen, Bricks or clean HTML.

See ready→made →
FAQ

Good to know.

Is this free?

Yes — the gradient converter is completely free, no signup.

Where do I get the gradient JSON?

From the Figma desktop console (Plugins → Development → Show/Hide console): select the layer and run copy(JSON.stringify(figma.currentPage.selection[0].fills)). REST API fills work too.

Does it handle rotated radial gradients?

It converts them and warns you: CSS cannot rotate a radial gradient's ellipse, so the result is the closest unrotated equivalent.

Ready?

Build a real site from your Figma file — in minutes.

Get ready→made Try free in Figma →
menu