Gradient Background CSS

Dashboard
1

Hi,

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

.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

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

Which trick am I missing? :slight_smile:

2

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

https://www.w3schools.com/css/css3_gradients.asp

3

Cool - thanks a lot!

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

4

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.

5

That's understood.

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

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

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

6

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

<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

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

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