# Gradient line in p5js webgl context

**URL:** <https://discourse.processing.org/t/gradient-line-in-p5js-webgl-context/43123>\
**Category:** Coding Questions\
**Created:** [November 2, 2023, 2:56am UTC](https://discourse.processing.org/t/gradient-line-in-p5js-webgl-context/43123 "2023-11-02T02:56:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [November 2, 2023, 2:56am UTC](https://discourse.processing.org/t/gradient-line-in-p5js-webgl-context/43123/1 "2023-11-02T02:56:51Z")

</div>

How could one color a line or a group of lines in p5 webgl canvas with linear gradient?

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [November 2, 2023, 8:28pm UTC](https://discourse.processing.org/t/gradient-line-in-p5js-webgl-context/43123/2 "2023-11-02T20:28:02Z")

</div>

Hi @blkpanther,

I’m not aware of a build-in function which do, but here’s an example on how could be done. Sorry, for bad naming convention an eventually typos, but code it on a quick on my mobile (which is a mess with web editors). Nevertheless, hope it helps…

Cheers  
— mnse

PS: I’ll try to refine it, when back on my box 🙂

https://editor.p5js.org/mnse_forum/full/uRV_KLV0c

---

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [November 3, 2023, 1:14am UTC](https://discourse.processing.org/t/gradient-line-in-p5js-webgl-context/43123/3 "2023-11-03T01:14:29Z")

</div>

thanks. I get the idea and it works.  
I’m wondering if shader can be used for this purpose but yet to find an example.