# Background Gradient

**URL:** <https://forums.fusetools.com/t/background-gradient/3350>\
**Category:** How-to Discussions\
**Created:** [June 13, 2017, 4:42pm UTC](https://forums.fusetools.com/t/background-gradient/3350 "2017-06-13T16:42:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Matt](https://avatars.discourse-cdn.com/v4/letter/m/a6a055/32.png) [@Matt](https://forums.fusetools.com/u/Matt)\
**Post date:** [June 13, 2017, 4:42pm UTC](https://forums.fusetools.com/t/background-gradient/3350/1 "2017-06-13T16:42:20Z")

</div>

I’m attempting to create a background-gradient.

```auto
<Panel Margin="0" Padding="5,5" Color="#E3234D">
</Panel>

```

How would I go ahead and get the background-color of the Panel to be a gradient instead of a solid? For example from red -\> blue.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [June 13, 2017, 4:43pm UTC](https://forums.fusetools.com/t/background-gradient/3350/2 "2017-06-13T16:43:14Z")

</div>

Hi Matt,

for that you would use [LinearGradient](https://www.fusetools.com/docs/fuse/drawing/lineargradient).

---

<div class="post-metadata">

**Author:** ![Matt](https://avatars.discourse-cdn.com/v4/letter/m/a6a055/32.png) [@Matt](https://forums.fusetools.com/u/Matt)\
**Post date:** [June 13, 2017, 4:46pm UTC](https://forums.fusetools.com/t/background-gradient/3350/3 "2017-06-13T16:46:24Z")

</div>

Hi Uldis!

Thats what I’ve understood also. Being new to Fusetools, I’m trying to understand how LinearGradient works.

Would I create a LinearGradient class inside my Panel? Would I leave the Panel’s color attribute empty?

Thanks!

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [June 13, 2017, 4:54pm UTC](https://forums.fusetools.com/t/background-gradient/3350/4 "2017-06-13T16:54:07Z")

</div>

Yes Matt, that’s exactly what you would do. Similar to what the example shows on the docs page:

```auto
<Panel>
    <LinearGradient StartPoint="0,0" EndPoint="0,1">
        <GradientStop Offset="0" Color="Red" />
        <GradientStop Offset="1" Color="Blue" />
    </LinearGradient>
</Panel>

```

---

<div class="post-metadata">

**Author:** ![Matt](https://avatars.discourse-cdn.com/v4/letter/m/a6a055/32.png) [@Matt](https://forums.fusetools.com/u/Matt)\
**Post date:** [June 13, 2017, 4:55pm UTC](https://forums.fusetools.com/t/background-gradient/3350/5 "2017-06-13T16:55:49Z")

</div>

Got it! Thank you so much! 🙂