Transforming Figma radial gradient into CSS format

Other Questions Figma
1

I’m dealing with a design that features a radial gradient. When I export this from Figma, the resulting CSS appears as follows:

background: radial-gradient(70.71% 70.71% at 100% 50%, #EFF4F5 0%, #C1C4C6 100%);

When I modify the gradient, the CSS changes to:

background: radial-gradient(47.17% 70.71% at 100% 50%, #EFF4F5 0%, #C1C4C6 100%);

However, when retrieving the same gradient via the Figma API, the data I receive appears quite different:

{
  "blendMode": "NORMAL",
  "type": "GRADIENT_RADIAL",
  "gradientHandlePositions": [
    {
      "x": 1.0000001490116865,
      "y": 0.5000002682209939
    },
    {
      "x": 0.5000001490116759,
      "y": 1.0000002086163384
    },
    {
      "x": 0.4999999701976776,
      "y": 2.9802318834981634e-8
    }
  ],
  "gradientStops": [
    // color stops here
  ]
}

I believe the initial pair of coordinates indicates the center of the gradient, which relates to the at 100% 50% in CSS. Yet, I am struggling to understand how to derive the ellipse dimensions 47.17% 70.71% from those three coordinates. What is the calculation needed to bridge the API coordinates with the CSS percentage values?

2

Figma’s gradientHandlePositions are basically vector math. Handle 1 is your gradient center, but the real trick is calculating radial distances from there. You need to find the magnitude of vectors from handle 1 to handles 2 and 3. So handle 1 (1.0, 0.5) to handle 2 (0.5, 1.0) gives you vector (-0.5, 0.5). The magnitude is sqrt(0.25 + 0.25) = 0.707, which converts to your 70.71%. Same process for the other dimension - calculate from handle 1 to handle 3, get the magnitude, multiply by 100. You’re converting between Figma’s normalized space and CSS percentage space. Each handle defines an ellipse axis in Figma’s system.

3

Those three gradient handles control different parts of the radial gradient. The first handle sets the center point, and the other two create the elliptical shape and rotation. To get the CSS ellipse dimensions, measure the distance from the center handle to the other two handles - these give you the semi-major and semi-minor axes. Here’s the tricky bit: Figma uses normalized coordinates that treat the shape as a 1x1 square. For CSS percentages, multiply those normalized distances by 100 to get values like your 47.17% and 70.71%. The conversion seems weird at first because Figma’s API output uses a different coordinate system than CSS radial gradients.

4

it’s a bit confusing, but those 3 handles do set up a coord system. the first one is the center, while the others help define the ellipse size. you need to figure out the vector distances from the center to the other handles and then scale those to match css percentages.

5

I faced a similar issue while developing a UI component library based on Figma designs. The key is understanding that Figma’s gradient handles define positions relative to a transformation matrix, rather than straightforward radius values. Specifically, while handle 1 marks the gradient’s center, handles 2 and 3 determine the ellipse’s proportions. The challenge arises due to the potential for diagonal alignment of the ellipse. To derive the CSS dimensions, consider treating handles 2 and 3 as radii perpendicular to each other, and project these values onto horizontal and vertical axes. Remember that CSS percentages reflect the ellipse’s size in relation to the dimensions of the element, so adjust for any differences between Figma’s coordinate system and the actual size of your component.

6

figma’s gradient can be tricky. the second & third handles are radius vectors from the center. to get ellipse dims, measure distances from handle 1 to 2&3, then convert those to percentages of your total size. that’s how you’ll match it up with css.