# How can i change opacity and color of GradientStop?

**URL:** <https://forums.fusetools.com/t/how-can-i-change-opacity-and-color-of-gradientstop/4651>\
**Category:** How-to Discussions\
**Created:** [January 8, 2017, 12:00am UTC](https://forums.fusetools.com/t/how-can-i-change-opacity-and-color-of-gradientstop/4651 "2017-01-08T00:00:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![chertovmv](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/chertovmv/32/78_2.png) [@chertovmv](https://forums.fusetools.com/u/chertovmv)\
**Post date:** [January 8, 2017, 12:00am UTC](https://forums.fusetools.com/t/how-can-i-change-opacity-and-color-of-gradientstop/4651/1 "2017-01-08T00:00:18Z")

</div>

Hi, help me please!

How can i change alpha channel of _ **DividerColor** _ in _ **GradientStop** _?

I want something like this:

```auto
<Rectangle ux:Class="Divider" Height="0.1">
    <float4 ux:Global="DividerColor" ux:Value="#a542db" />
    <LinearGradient StartPoint="0,0" EndPoint="1,0">
        <GradientStop Offset="0.0" Color="DividerColor" /> <!-- alpha is 0 -->
        <GradientStop Offset="0.5" Color="DividerColor" /> <!-- alpha is 1 -->
        <GradientStop Offset="1.0" Color="DividerColor" /> <!-- alpha is 0 -->
    </LinearGradient>
</Rectangle>

```

This is don’t work…

And GradientStop don’t have Opacity property.

```auto
        <float3 ux:Global="DividerColor" ux:Value="#a542db" />
        <!--...-->
        <GradientStop Offset="0.0" Color="DividerColor,1.0" />
        <GradientStop Offset="0.0" Color="DividerColor + 1.0" />
        <GradientStop Offset="0.0" Color="{DividerColor},1.0" />
        <GradientStop Offset="0.0" Color="float4(DividerColor,1.0)" />

```

Can i append float to float3 and get float4?

Or can i create custom function for ux expressions like [this](https://www.fusetools.com/docs/ux-markup/expressions#functions)?

---

<div class="post-metadata">

**Author:** ![maxgraey](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/maxgraey/32/347_2.png) [@maxgraey](https://forums.fusetools.com/u/maxgraey)\
**Post date:** [January 8, 2017, 1:31am UTC](https://forums.fusetools.com/t/how-can-i-change-opacity-and-color-of-gradientstop/4651/2 "2017-01-08T01:31:41Z")

</div>

Fuse has extended color literals (with alpha). For example `#rrggbb(aa)`

So rewrite your UX like that:

```auto
<float4 ux:Global="DividerColor0" ux:Value="#a542db00" />
<float4 ux:Global="DividerColor1" ux:Value="#a542dbff" />

<Rectangle ux:Class="Divider" Height="0.1">
    <LinearGradient StartPoint="0,0" EndPoint="1,0">
        <GradientStop Offset="0.0" Color="DividerColor0"/> <!-- alpha is 0 -->
        <GradientStop Offset="0.5" Color="DividerColor1"/> <!-- alpha is 1 -->
        <GradientStop Offset="1.0" Color="DividerColor0"/> <!-- alpha is 0 -->
    </LinearGradient>
</Rectangle>

```

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [January 8, 2017, 8:39am UTC](https://forums.fusetools.com/t/how-can-i-change-opacity-and-color-of-gradientstop/4651/3 "2017-01-08T08:39:11Z")

</div>

Hi!

Starting in Fuse 0.31.2 you should be able to do `Color="DividerColor * (1,1,1,0)"` to cancel out the alpha channel.

---

<div class="post-metadata">

**Author:** ![chertovmv](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/chertovmv/32/78_2.png) [@chertovmv](https://forums.fusetools.com/u/chertovmv)\
**Post date:** [January 10, 2017, 5:13am UTC](https://forums.fusetools.com/t/how-can-i-change-opacity-and-color-of-gradientstop/4651/4 "2017-01-10T05:13:23Z")

</div>

maxgraey, Anders Lassen,

Thanks!) The problem is solved!