How to export figma gradients to CSS or Webflow

[Gayani_S]

Hey @Khan_Abdul_Rehman, thank you for reaching out! I’d recommend checking out this Forum post, users have suggested some solutions: How to convert Figma Gradient to CSS Gradient

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

How to convert Figma Gradient to CSS Gradient

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 Fi…

Please let me know if these suggestion help, happy to help further!