# Two Gradients with Library Colors on same element

**URL:** <https://community.weweb.io/t/two-gradients-with-library-colors-on-same-element/8703>\
**Category:** Ask us anything\
**Created:** [May 21, 2024, 3:53pm UTC](https://community.weweb.io/t/two-gradients-with-library-colors-on-same-element/8703 "2024-05-21T15:53:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mark\_Pederson](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark_pederson/32/14758_2.png) [@Mark\_Pederson](https://community.weweb.io/u/Mark_Pederson)\
**Post date:** [May 21, 2024, 3:53pm UTC](https://community.weweb.io/t/two-gradients-with-library-colors-on-same-element/8703/1 "2024-05-21T15:53:20Z")

</div>

Hey @Alexis @Joyce -

We have kicked off development on a big project (WeWeb + Xano + Neo4J) and we are hitting an issue.

Our front end design is pretty elaborate and has many elements with TWO gradients.

We REALLY want to leverage the advantages of LIBRARY colors - and we would want to BIND our gradients to LIBRARY colors - like you showed me how to do in this thread - [We need GRADIENTS in Library Colors](https://community.weweb.io/t/we-need-gradients-in-library-colors/7929)

But that formula does **NOT** work for adding TWO different gradients to same element.

**Could this become possible in the near term?? Is it already possible but requires a different non-documented syntax??**

REALLY want to avoid doing a zillion CSS bound to variables, etc - 🙏 🙏 🙏 🙏

---

<div class="post-metadata">

**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [May 21, 2024, 6:00pm UTC](https://community.weweb.io/t/two-gradients-with-library-colors-on-same-element/8703/2 "2024-05-21T18:00:56Z")

</div>

I’m not sure to understand why it would not work to add multiple gradients

![Capture d’écran 2024-05-21 à 19.53.20](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/ea8069dc715c0e883a940bf12f6f49616e32c95e.png)

You can create a formula that will generate the gradient for you so it became easier do to

![Capture d’écran 2024-05-21 à 20.00.02](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/d30e11a84ef65d8bd8c6c2afba3f5c73908331a5.png)

Or create a folder to store multiple formulas for every possible gradient if you want to manage them in a single place like with the library

You can learn more about the gradient syntax here =\> [Using CSS gradients - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients)

---

<div class="post-metadata">

**Author:** ![Mark\_Pederson](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark_pederson/32/14758_2.png) [@Mark\_Pederson](https://community.weweb.io/u/Mark_Pederson)\
**Post date:** [May 22, 2024, 3:56pm UTC](https://community.weweb.io/t/two-gradients-with-library-colors-on-same-element/8703/3 "2024-05-22T15:56:31Z")

</div>

Hey @Alexis indeed it works!!!

We had an error in our formula re: stacking / transparency, etc.

So happy we can 100% leverage LIBRARY for all things color in this app. Thx!!