Skip to main content
Question

How to convert Figma Gradient to CSS Gradient


Apirak

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 😓.

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:

gist.github.com
This topic has been closed for replies.

6 replies

Nushaine_F

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 🙂


Nushaine_F

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).


Michael_Yagudaev

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


Honky
  • 1 reply
  • October 15, 2022

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


Michael_Yagudaev

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


Surveme
  • 1 reply
  • September 24, 2023

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings