# Animating a gradient

**URL:** <https://forum.inductiveautomation.com/t/animating-a-gradient/9377>\
**Category:** Ignition\
**Created:** [November 25, 2014, 4:07am UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377 "2014-11-25T04:07:18Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [November 25, 2014, 2:06pm UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/2 "2014-11-25T14:06:12Z")

</div>

Yeah, it get’s a little messy. OK, a lot messy, but it can be done. I added three extra Properties to a rectangle, Color1, Color2, and Style. This way you can pick both colors of the gradient via scripting.

`if event.propertyName=="Color1":
  from java.awt import Color
  from java.awt import GradientPaint
  o=event.source
  x1=o.relX
  y1=o.relY
  Color1=o.Color1
  x2=x1+o.relWidth
  y2=y1
  Color2=o.Color2
  o.setFillPaint(GradientPaint(x1,y1,Color1,x2,y2,Color2,1))`

When changing the gradient this way, the Fill Paint type becomes unknown, so you have to change it to something it recognizes before yo can do anything further to it. Like copy/paste, or adjust your styles:  
 ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/9/9031d9cdeae5464b286bdc061b9cce03628f0a38.png)

Perhaps someone else can chime in and tell me what I’m missing… ![:scratch:](https://us1.discourse-cdn.com/inductiveautomation/original/1X/76d1620bec252bfac07050c889ff5a91dc8a9c25.gif ":scratch:")

Here’s a window to look at.  
[AnimatedGradient\_2014-11-25\_0850.proj](https://us1.discourse-cdn.com/inductiveautomation/original/2X/9/9a96618aa4f462e7ede1932ab837cda2c66cc9df.proj) (6.97 KB)

---

_[View the full topic](https://forum.inductiveautomation.com/t/animating-a-gradient/9377)._