How to convert a figma radial gradient into css?

135 views Asked by At

I have a square in figma (I'm not a designer or a fronten developer, so I can't explain exactly how it was created), a radial gradient is applied on it. I drag the gradient as follows - I put the center in the middle of the right face, the second point of the straight gradient guide in the middle of the lower face, the point that lies on the perpendicular line and is responsible for the flatness of the gradient in the middle of the upper face. If you switch to developer mode, the figure turns this into the following css:

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

If you shorten the perpendicular line, then the first number in CSS decreases:

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

We get the structure of this frame via the api, and the gradient in the response is described as follows:

{
  "blendMode": "NORMAL",
  "type": "GRADIENT_RADIAL",
  "gradientHandlePositions": [
    {
      "x": 1.0000001490116865,
      "y": 0.5000002682209939
    },
    {
      "x": 0.5000001490116759,
      "y": 1.0000002086163384
    },
    {
      "x": 0.4999999701976776, // это не грани, для укороченной линии приходит 0.6879759173955349
      "y": 2.9802318834981634e-8 // это на грани, для укороченной линии приходит 0.18797598797746545
    }
  ],
  "gradientStops": [
    // ...
  ]
}

Apparently, the elements in gradientHandlePositions are described in relative terms of the height and width of the square. The first element describes the center of the gradient (and the at 100% 50% part of css is clearly obtained from it), the second describes the end of the gradient guide, and the third describes a point on a perpendicular line that regulates the flatness of the gradient. But how do I get (47.17% 70.71% at from these coordinates - I don't see any dependence.

0

There are 0 answers