Skip to main content
Question

Best way to get an animated mesh gradient to CSS?


Hi, community! I’m pretty new to Figma so please bear with me. For a website design, I followed one of the many mesh gradient tutorials out there to make animated mesh gradients that work great in Figma’s preview mode.

But when my developer grabs Figma’s CSS to recreate the gradients in code, he says all sorts of numbers in the CSS code that Figma gives him are wrong, such as the rotation angles of the shapes that animate. He is making do by manually changing numbers based on his best guesses, but this seems like an inaccurate and labor-intensive workaround.

Many files and tutorials exist on Youtube and the Figma community that teach how to create animated mesh gradients in Figma, but none of these tutorials address the question of how a developer is supposed to consume the resulting animation in code to reproduce it on a real website.

Are my developer and I missing something fundamental about animated mesh gradients?

This topic has been closed for comments

4 replies

  • Figmate
  • 1884 replies
  • April 18, 2024

Hi @Julia81, Thanks for getting in touch! I totally get how frustrating it must be to manually adjust numbers in code.

Would it be possible for you to share the design file and the code where the rotation angles for the gradients are going wrong?
Also, it would be helpful to know how your developer is obtaining the CSS code for gradients. For example, are they right-clicking the frame and selecting ‘Copy as code’? This information will allow us to try and reproduce the issue in our own files for further investigation.

In the meantime, I’ve done some digging in our community and found a few plugins that, while may not be exactly what you’re looking for, could potentially be helpful to your developer:

Feel free to explore our community on your own.

Looking forward to hearing from you soon. If I’ve misunderstood anything, don’t hesitate to let us know.
Also, we believe our community is full of experts with brilliant insights and suggestions, please feel free to share here!

Thanks,


  • Author
  • 3 replies
  • April 26, 2024

Thanks, Junko3! I have passed along your answer to the developer and will report back with followup questions.


  • 1 reply
  • August 12, 2024

Hii Julia, how did it go? Have you found a solution?


  • Author
  • 3 replies
  • August 12, 2024

Hi! Thanks for checking in. We stopped trying with Figma – exploring options was taking up too much developer time. Instead we went with a javascript option.


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