# Gradient background on buttons

**URL:** <https://forum.inductiveautomation.com/t/gradient-background-on-buttons/29106>\
**Category:** Ignition\
**Created:** [October 15, 2019, 9:42pm UTC](https://forum.inductiveautomation.com/t/gradient-background-on-buttons/29106 "2019-10-15T21:42:56Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [October 15, 2019, 10:51pm UTC](https://forum.inductiveautomation.com/t/gradient-background-on-buttons/29106/2 "2019-10-15T22:51:23Z")

</div>

That might depend on whether you’re using the Vision or Perspective module. Are you using Vision or are you using Perspective?

I want to say that gradients are not a possibility in Vision (but if someone wants to correct me, feel free).

Perspective gradients are easy:  
Set `Button.props.style.backgroundImage` to `linear-gradient(to right, yellow , green)`.  
 ![15%20PM](https://us1.discourse-cdn.com/inductiveautomation/original/2X/1/19b1a91d07f0ec84f2af1f5b50bf76de4015dfaf.png)

To do a left-to-right gradient.

For a more diagonal gradient, use something like `linear-gradient(to bottom right, red , blue)`.

![39%20PM](https://us1.discourse-cdn.com/inductiveautomation/original/2X/4/4300e926f9869da9269592838a013451c26733dd.png)

This page has some more examples: [CSS Gradients](https://www.w3schools.com/css/css3_gradients.asp).

---

_[View the full topic](https://forum.inductiveautomation.com/t/gradient-background-on-buttons/29106)._