How to convert Figma Gradient to CSS Gradient

Hi Apirak,

If you’re using the node object from a Figma Plugin, I highly recommend using this function:

import { extractLinearGradientParamsFromTransform } from "@figma-plugin/helpers";

If you’re using the Figma API, it’s a little more tedious. I implemented this before (its not always perfect, the angle gets messed up sometimes), but you can check out my code here.

I hope this helps 🙂

the code is quite long since you have to a couple of tedious linear transformations if the node itself is rotated (gets even more annoying if the gradient & node is rotated).

Below are a couple of links that should be extremely helpful in filling in the blanks.

I’ve created a plugin for CSS Gradient => Figma Gradient and found them useful. In particular, the W3C documentation is really helpful and has formulas to use.

Gradients Compared between Figma, Sketch and CSS: Gradient angles in CSS, Figma & Sketch

W3C Spec for Gradients: CSS Images Module Level 3

CSS Gradient to Figma Plugin: GitHub - yagudaev/css-gradient-to-figma: Plugin to insert a CSS Gradient into Figma

Figma REST API Handle Positions to Figma Plugin Transform: Figma convert `gradientHandlePositions` to `transformGradient` and vice-versa · GitHub

Thank you so much!!! Its really hard, How about radial?)))

I’d love some help on getting the Radial’s done 😁. Someone else asked me recently about it too.