Paste a Figma gradient fill and get exact CSS: linear-gradient(), radial-gradient() or conic-gradient(), with the angle and stop positions corrected for your layer's size. Free, and it runs in your browser.
Figma does not store a gradient as an angle. Its API describes every gradient fill with three normalized handle points (gradientHandlePositions in the REST API) or an affine matrix (gradientTransform in the Plugin API), both relative to the layer's bounding box. Copying those numbers straight into CSS gives the wrong angle on any layer that isn't square. This converter does the math for you: it inverts the matrix when needed, projects the handles onto the CSS gradient line for your layer's width and height, and returns a clean background declaration. Linear, radial and angular (conic) gradients are supported; diamond gradients fall back to the closest radial. The formulas behind it are explained in our guide to Figma gradient transformations and the follow-up on radial and conic gradients.
In the Figma desktop app open the developer console, select the layer and run copy(JSON.stringify(figma.currentPage.selection[0].fills)). Fills from the REST API work too.
Paste the JSON below and enter the layer's width and height from Figma's design panel. The CSS angle depends on the aspect ratio.
Hit Convert, check the live preview, then copy the background declaration into your stylesheet or builder.
🔒 Conversion runs entirely in your browser. Nothing you paste here is uploaded or stored.
✓ You're on the list — we'll email you when this converter gets better.
ready→made converts complete Figma frames, gradients included, into Elementor, Gutenberg, Oxygen 6, Oxygen Classic, Etch or clean HTML.
Yes. The converter is free, needs no account and runs entirely in your browser.
Figma stores handle positions as fractions of the layer's bounding box. A gradient from the top-left to the bottom-right corner is 135deg on a square, but a different angle on a wide banner. The converter scales the handles by the real size before it computes the CSS angle and the stop positions.
The REST API returns gradientHandlePositions: three points (start, end and width handle) in the layer's normalized space. The Plugin API returns gradientTransform: a 2x3 matrix that maps the layer into gradient space. The converter accepts both. For the matrix it computes the inverse and derives the same three handles.
Linear becomes linear-gradient(), radial becomes radial-gradient() with the correct radii and center, and angular becomes conic-gradient(). Diamond gradients have no CSS equivalent, so you get the closest radial gradient plus a note.
Two: a radial gradient whose ellipse is rotated in Figma (CSS cannot rotate a radial ellipse), and diamond gradients. The tool tells you when either applies. Stop alpha and the fill's own opacity are carried over into rgba() colors.
A single gradient paint, a whole fills array, or a node object with a fills key. Solid, image and hidden paints are skipped; the first visible gradient is converted.