# Use Gradient for Simple Gauge Component? **URL:** \ **Category:** Maker\ **Tags:** perspective\ **Created:** [December 19, 2020, 10:58pm UTC](https://forum.inductiveautomation.com/t/use-gradient-for-simple-gauge-component/41674 "2020-12-19T22:58:34Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![sungkhum](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sungkhum/32/10636_2.png) [@sungkhum](https://forum.inductiveautomation.com/u/sungkhum)\ **Post date:** [December 19, 2020, 10:58pm UTC](https://forum.inductiveautomation.com/t/use-gradient-for-simple-gauge-component/41674/1 "2020-12-19T22:58:34Z")
Is there a way to use a gradient on the arc of a simple gauge? I’d like it to go from blue to red (cold to hot). I tried setting the background but that caused an error. `linear-gradient(to right, #1d66ff, #ff5858)` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/d/2d6ed4426de919cc78f473d5360c1c0a23a6ecbe.png) ---
**Author:** ![hannah.godofsky](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hannah.godofsky/32/20483_2.png) [@hannah.godofsky](https://forum.inductiveautomation.com/u/hannah.godofsky)\ **Post date:** [January 4, 2021, 8:22pm UTC](https://forum.inductiveautomation.com/t/use-gradient-for-simple-gauge-component/41674/2 "2021-01-04T20:22:34Z")
Following. I’m not finding a lot of useful info about how to use gradients for dynamic page elements and not just backgrounds and things like that. The one good example I found was of a tank, but it was an SVG graphic where they did the fill as a gradient. That isn’t an approach that is workable with the built-in components like the simple gauge. But clients always ask for the gradient. ---
**Author:** ![sungkhum](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sungkhum/32/10636_2.png) [@sungkhum](https://forum.inductiveautomation.com/u/sungkhum)\ **Post date:** [January 6, 2021, 6:25pm UTC](https://forum.inductiveautomation.com/t/use-gradient-for-simple-gauge-component/41674/3 "2021-01-06T18:25:11Z")
I created a feature request for this as it seems currently this is not possible: [https://inductiveautomation.canny.io/ignition-features-and-ideas/p/ability-to-add-gradients-to-components](https://inductiveautomation.canny.io/ignition-features-and-ideas/p/ability-to-add-gradients-to-components) ---
**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:** [January 6, 2021, 7:11pm UTC](https://forum.inductiveautomation.com/t/use-gradient-for-simple-gauge-component/41674/4 "2021-01-06T19:11:50Z")
Adding a gradient feature is unlikely, as you can bind the color value to be whatever you want. This is a simplistic mapping approach: ![Screen Shot 2021-01-06 at 11.06.14AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/e/eeec9567f07d9e0018f5560b0febaeef4d911ae9.png) You could generate your own gradient function as a project script which expects a “low” color, a “high” color, a “low” value, a “high” value, and the “current” value, and then return an appropriate color based on those values. ---
**Author:** ![sungkhum](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sungkhum/32/10636_2.png) [@sungkhum](https://forum.inductiveautomation.com/u/sungkhum)\ **Post date:** [January 6, 2021, 9:26pm UTC](https://forum.inductiveautomation.com/t/use-gradient-for-simple-gauge-component/41674/5 "2021-01-06T21:26:28Z")
Changing colors of the whole gauge color is good, but from a visual/design perspective, the ability to have gradients is something that would be a great feature. It is something that is possible with css and SVGs - but just, it seems, not possible in Perspective for components. EDIT: Info on how to do this with css and SVGs: [https://stackoverflow.com/questions/37328302/fill-an-svg-shape-with-a-gradient](https://stackoverflow.com/questions/37328302/fill-an-svg-shape-with-a-gradient) ---
**Author:** ![hannah.godofsky](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hannah.godofsky/32/20483_2.png) [@hannah.godofsky](https://forum.inductiveautomation.com/u/hannah.godofsky)\ **Post date:** [January 7, 2021, 3:44pm UTC](https://forum.inductiveautomation.com/t/use-gradient-for-simple-gauge-component/41674/6 "2021-01-07T15:44:02Z")
Yea a lot of what I’ve done to style the elements I’m using has relied on that type of mapping/scripting but being able to do this systematically would be more efficient and allow for a more consistent visual style. Esp on mobile/tablet there seems to be higher expectations there than there may have been with just a website ---
**Author:** ![mirandajoseph549](https://avatars.discourse-cdn.com/v4/letter/m/22d042/32.png) [@mirandajoseph549](https://forum.inductiveautomation.com/u/mirandajoseph549)\ **Post date:** [February 1, 2021, 5:49pm UTC](https://forum.inductiveautomation.com/t/use-gradient-for-simple-gauge-component/41674/7 "2021-02-01T17:49:20Z")
> [@sungkhum](#): > > Changing colors of the whole gauge color is good, but from a visual/design perspective, the ability to have gradients is something that would be a great feature. It is something that is possible with css and SVGs - but just, it seems, not possible in Perspective for components. > > EDIT: Info on how to do this with css and SVGs: [https://stackoverflow.com/questions/37328302/fill-an-svg-shape-with-a-gradient/](https://stackoverflow.com/questions/37328302/fill-an-svg-shape-with-a-gradient)[employee monitoring software](https://www.worktime.com/employee-monitoring) Thank You, sungkhum!