# Gradient Background CSS

**URL:** <https://discourse.nodered.org/t/gradient-background-css/9950>\
**Category:** Dashboard\
**Created:** [9 April 2019 14:04 UTC](https://discourse.nodered.org/t/gradient-background-css/9950 "2019-04-09T14:04:49Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![aufruf](https://avatars.discourse-cdn.com/v4/letter/a/ce7236/32.png) [@aufruf](https://discourse.nodered.org/u/aufruf)\
**Post date:** [9 April 2019 14:04 UTC](https://discourse.nodered.org/t/gradient-background-css/9950/1 "2019-04-09T14:04:49Z")

</div>

Hi,

I am trying to have a gradient css background like the example below:

```auto
.new-leaf-gradient { background: -webkit-linear-gradient(360deg,#00537E 10%,#3AA17E 360%); background: linear-gradient(360deg,#00537E 10%,#3AA17E 360%); }

```

However I am even struggling on getting css to change the “normal” background Color.

What I have tried so far:

Include a template node in one of my flows, add it to the header and change for angular theme. Add

```auto
<style>
body {background-color: coral;}
</style>

```

Which trick am I missing? 🙂

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 April 2019 14:15 UTC](https://discourse.nodered.org/t/gradient-background-css/9950/2 "2019-04-09T14:15:12Z")

</div>

May be this trick  
`background-image: linear-gradient(to right, #404040, #737373);`

[https://www.w3schools.com/css/css3\_gradients.asp](https://www.w3schools.com/css/css3_gradients.asp)

---

<div class="post-metadata">

**Author:** ![aufruf](https://avatars.discourse-cdn.com/v4/letter/a/ce7236/32.png) [@aufruf](https://discourse.nodered.org/u/aufruf)\
**Post date:** [9 April 2019 16:04 UTC](https://discourse.nodered.org/t/gradient-background-css/9950/3 "2019-04-09T16:04:02Z")

</div>

Cool - thanks a lot!

Still don’t know why my simple color example is not working but your code worked.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 April 2019 16:20 UTC](https://discourse.nodered.org/t/gradient-background-css/9950/4 "2019-04-09T16:20:47Z")

</div>

That's the way it is. The property to adjust for gradient background is `background-image`  
The `background-color` is for single color  
Why, I don't know. There is a lot of people working on web standards. I'm sure somebody knows but .. yeah for us is more important to know how to use the thing.

---

<div class="post-metadata">

**Author:** ![aufruf](https://avatars.discourse-cdn.com/v4/letter/a/ce7236/32.png) [@aufruf](https://discourse.nodered.org/u/aufruf)\
**Post date:** [9 April 2019 18:01 UTC](https://discourse.nodered.org/t/gradient-background-css/9950/5 "2019-04-09T18:01:56Z")

</div>

That's understood.

What I don't understand is, why the below doesn't work.

```auto
<style>
body {background-color: #FFFFFF;}
</style>

```

Anyhow, thanks for your reply. My dashboard looks a lot better now 🙂

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 April 2019 18:23 UTC](https://discourse.nodered.org/t/gradient-background-css/9950/6 "2019-04-09T18:23:17Z")

</div>

Oh I see, I think you are looking for this then (for angular theme)

```auto
<style>
md-content.md-default-theme, md-content {
    background-color: rgb(55,0,87);
}
</style>

```

But those can defined in Angular tab for theme adjustments

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/eff403d1304f4a75642f9c886a560fa50081e006.png)

Yet if gradient for md-content then again yes, style override

```auto
<style>
md-content.md-default-theme, md-content {
    background-image: linear-gradient(to right, #404040, #737373)
}
</style>

```