How to convert Figma Gradient to CSS Gradient

I’m trying to convert a Figma Gradient into a CSS Gradient. I figured out how to calculate degrees, but I can’t figure out how to calculate the CSS stop position :sweat:.

It appears that Figma and CSS have different way to calculate stop positions.

How to convert Figma Stop position to CSS Stop position?

Position 0 => -42.51%
Position 0.3958… => 31.41%
Position 1 => 144.22%

My code convert only when start,stop of Figma and CSS are in the same position:

1 Like

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 :slight_smile:

3 Likes

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

1 Like

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