# How to create a linear gradient?

**URL:** <https://forum.defold.com/t/how-to-create-a-linear-gradient/13361>\
**Category:** Questions\
**Created:** [November 5, 2017, 5:27pm UTC](https://forum.defold.com/t/how-to-create-a-linear-gradient/13361 "2017-11-05T17:27:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![hamzaydia](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/hamzaydia/32/2104_2.png) [@hamzaydia](https://forum.defold.com/u/hamzaydia)\
**Post date:** [November 5, 2017, 5:27pm UTC](https://forum.defold.com/t/how-to-create-a-linear-gradient/13361/1 "2017-11-05T17:27:05Z")

</div>

Hi, I need to have a linear gradient with 2 colors or more on my background, and i would like to know if there is any way i can do that in Defold, or there is a ready to use shader.  
Thanks

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [November 5, 2017, 5:53pm UTC](https://forum.defold.com/t/how-to-create-a-linear-gradient/13361/2 "2017-11-05T17:53:11Z")

</div>

Shader is the best way if you want it to be dynamically generated. You can stretch a [quad](https://github.com/subsoap/defold-standard-geometry/blob/master/defold-standard-geometry/dae/quad.dae) to fit your window size, and give it a gradient shader.

I don’t know that there is a Defold ready gradient shader prepared already somewhere by someone. You can find examples on shadertoy for how you could make one

[https://www.shadertoy.com/results?query=linear+gradient](https://www.shadertoy.com/results?query=linear+gradient)

> **[GLSL Sandbox](https://glslsandbox.com/e)**

---

<div class="post-metadata">

**Author:** ![hamzaydia](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/hamzaydia/32/2104_2.png) [@hamzaydia](https://forum.defold.com/u/hamzaydia)\
**Post date:** [November 5, 2017, 5:59pm UTC](https://forum.defold.com/t/how-to-create-a-linear-gradient/13361/3 "2017-11-05T17:59:18Z")

</div>

Thank you so much, you saved me \<3

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [November 5, 2017, 10:21pm UTC](https://forum.defold.com/t/how-to-create-a-linear-gradient/13361/4 "2017-11-05T22:21:38Z")

</div>

Please share the shader if you get it working!

---

<div class="post-metadata">

**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\
**Post date:** [November 6, 2017, 8:21am UTC](https://forum.defold.com/t/how-to-create-a-linear-gradient/13361/5 "2017-11-06T08:21:12Z")

</div>

I show a small example of this [here](https://forum.defold.com/t/2d-light-implemetations/3636/5).