# Color Gradient in Stroke

**URL:** <https://discourse.processing.org/t/color-gradient-in-stroke/24910>\
**Category:** Coding Questions\
**Created:** [October 26, 2020, 11:46am UTC](https://discourse.processing.org/t/color-gradient-in-stroke/24910 "2020-10-26T11:46:08Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ladan](https://avatars.discourse-cdn.com/v4/letter/l/dbc845/32.png) [@Ladan](https://discourse.processing.org/u/Ladan)\
**Post date:** [October 26, 2020, 11:46am UTC](https://discourse.processing.org/t/color-gradient-in-stroke/24910/1 "2020-10-26T11:46:08Z")

</div>

Hello!  
Is there any way, I can make a color gradient in the stroke of a button?

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e143f05757db1f4eeca15b9b74ea38944b4b277d.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 26, 2020, 11:52am UTC](https://discourse.processing.org/t/color-gradient-in-stroke/24910/2 "2020-10-26T11:52:54Z")

</div>

The outline, the text or the background of the button?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 27, 2020, 12:16am UTC](https://discourse.processing.org/t/color-gradient-in-stroke/24910/3 "2020-10-27T00:16:06Z")

</div>

Hello,

Start with a shape such as:

> **[beginShape() \\ Language (API) \\ Processing 3+](https://processing.org/reference/beginShape_.html)**

And add a stroke before each vertex:

> **[stroke() \\ Language (API) \\ Processing 3+](https://processing.org/reference/stroke_.html)**

Use the P2D renderer.

And voila!

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b55c145fd0c32f12f6d4bbe6c499b8d6dc20af43.png)

`:)`

---

<div class="post-metadata">

**Author:** ![Ladan](https://avatars.discourse-cdn.com/v4/letter/l/dbc845/32.png) [@Ladan](https://discourse.processing.org/u/Ladan)\
**Post date:** [October 28, 2020, 1:05pm UTC](https://discourse.processing.org/t/color-gradient-in-stroke/24910/4 "2020-10-28T13:05:29Z")

</div>

Thanks! 🙂

---

<div class="post-metadata">

**Author:** ![Ladan](https://avatars.discourse-cdn.com/v4/letter/l/dbc845/32.png) [@Ladan](https://discourse.processing.org/u/Ladan)\
**Post date:** [October 28, 2020, 1:05pm UTC](https://discourse.processing.org/t/color-gradient-in-stroke/24910/5 "2020-10-28T13:05:46Z")

</div>

I meant outline, but I changed my mind 😃