# Vision 8.1- Gradient Fill

**URL:** <https://forum.inductiveautomation.com/t/vision-8-1-gradient-fill/93610>\
**Category:** Ignition\
**Tags:** vision\
**Created:** [July 23, 2024, 3:47pm UTC](https://forum.inductiveautomation.com/t/vision-8-1-gradient-fill/93610 "2024-07-23T15:47:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Grant\_Bargeloh](https://avatars.discourse-cdn.com/v4/letter/g/ecd19e/32.png) [@Grant\_Bargeloh](https://forum.inductiveautomation.com/u/Grant_Bargeloh)\
**Post date:** [July 23, 2024, 3:47pm UTC](https://forum.inductiveautomation.com/t/vision-8-1-gradient-fill/93610/1 "2024-07-23T15:47:26Z")

</div>

Is there a way to get the background color to be gradient for labels/buttons for Vision?

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [July 26, 2024, 2:17am UTC](https://forum.inductiveautomation.com/t/vision-8-1-gradient-fill/93610/2 "2024-07-26T02:17:11Z")

</div>

Here's a quick tutorial on how to create a generic gradient button or label using a template:

First, underlay the button or label with rectangles using the shape tool:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/3/1316186895073f29e7dcea8f3a0d530db938ecab.png)

Apply the gradient background, and rotate the shapes so the gradients run in the desired direction:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/2/c2437499f09f43f5e6bb46fcf5c40f90f2e7d08f.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/7/c795e0f9739ced706f162f39662076eb31471d28.png)

Finally, set the background of the button or label to transparent, and overlay the shapes with the button to create a gradient button effect:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/9/19b34d461ca21abc1c52fd71f6778bd7cb000746.png)

**Result:**  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/2/12d22357b4243f487651ace5ded43c7a86578fad.png)

---

<div class="post-metadata">

**Author:** ![Grant\_Bargeloh](https://avatars.discourse-cdn.com/v4/letter/g/ecd19e/32.png) [@Grant\_Bargeloh](https://forum.inductiveautomation.com/u/Grant_Bargeloh)\
**Post date:** [July 29, 2024, 6:35pm UTC](https://forum.inductiveautomation.com/t/vision-8-1-gradient-fill/93610/3 "2024-07-29T18:35:51Z")

</div>

Thank you!