# Linear Gradient inside While Tage

**URL:** <https://forums.fusetools.com/t/linear-gradient-inside-while-tage/4852>\
**Category:** How-to Discussions\
**Created:** [February 15, 2018, 3:10pm UTC](https://forums.fusetools.com/t/linear-gradient-inside-while-tage/4852 "2018-02-15T15:10:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![GFlakes](https://avatars.discourse-cdn.com/v4/letter/g/bbe5ce/32.png) [@GFlakes](https://forums.fusetools.com/u/GFlakes)\
**Post date:** [February 15, 2018, 3:10pm UTC](https://forums.fusetools.com/t/linear-gradient-inside-while-tage/4852/1 "2018-02-15T15:10:38Z")

</div>

Hi there,

I have a simple problem, I have set of buttons like navigation tabs and they are all in Liner Gradient color when the button is clicked I want to change the active button color to white then when clicking the other buttons the first button return back to be that gray gradient. I have accomplished the first part which make the color white but linear gradient won’t work inside a While Tage

```auto
        <Panel ux:Name="page1Tab" Margin="0,0,0,0">
				<Tab ux:Name="FirstTap" CornerRadius="3" Margin="5,0,0,0" TextColor="#6d6d6d" Text="Embarced">
					<Clicked>
						<Set navigation.Active="page1" />
						<Change FirstTap.Color="#fff" />
						<Set SecondTap.LinearGradient>
							<LinearGradient StartPoint="0,0" EndPoint="0,1">
           					 <GradientStop Offset="0" Color="#fff" />
            				 <GradientStop Offset="1" Color="#ccc" />
      						</LinearGradient>
						</Set>						
					</Clicked>
				</Tab>
			</Panel>

```

Any suggestion what should I do …!?

---

<div class="post-metadata">

**Author:** ![Arturs](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/arturs/32/582_2.png) [@Arturs](https://forums.fusetools.com/u/Arturs)\
**Post date:** [February 16, 2018, 10:20am UTC](https://forums.fusetools.com/t/linear-gradient-inside-while-tage/4852/2 "2018-02-16T10:20:44Z")

</div>

Hey,

You can add an overlay with `Opacity=0` and white color. This will be our rest state with visible `LinearGradient`. Read [this](https://www.fusetools.com/community/forums/howto_discussions/how_to_change_state?page=1&highlight=6432428a-f689-41f6-b753-51f6987386e1#post-6432428a-f689-41f6-b753-51f6987386e1) post about rest state and deviation from the rest state.

Inside `WhilePressed` change `Opacity=1`, so we can see overlay. The same can be applied to `Clicked`, but it depends on use case.

Here is a small example.

```auto
<App>
    <Panel ux:Class="VeryFancyButton">
        <Panel ux:Name="overlay" Color="#fff" Opacity="0" />
        <LinearGradient StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0" Color="#18f" />
            <GradientStop Offset="1" Color="#fff" />
        </LinearGradient>
        <Rectangle StrokeWidth="1" StrokeColor="#0004" />
        <WhilePressed>
            <Change overlay.Opacity="1" Duration="0.32" />
        </WhilePressed>
    </Panel>

    <VeryFancyButton Alignment="Center" Width="200" Height="68" />
</App>

```

---

<div class="post-metadata">

**Author:** ![GFlakes](https://avatars.discourse-cdn.com/v4/letter/g/bbe5ce/32.png) [@GFlakes](https://forums.fusetools.com/u/GFlakes)\
**Post date:** [February 16, 2018, 1:42pm UTC](https://forums.fusetools.com/t/linear-gradient-inside-while-tage/4852/3 "2018-02-16T13:42:44Z")

</div>

Great !! Great…  
That was very helpful thanks @Arturs