Change header color to transition in opacity?

[shughesd]

Hello, how can the background color in the header from solid at the top to transparent at the bottom? I’ve managed some transparency, but would love the gradient.

Troughton Residential

[basanta]

Hi @shughesd,

Thanks for writing in!

You can use custom gradient color CSS for the header bar.
Please generate your gradient CSS here https://mycolor.space/gradient

Hope this helps!

[shughesd]

Hey,

That is cool, thanks for the top on the tool.

I was hoping to use a gradient with the same color, but variation in opacity - from solid at top to transparent on bottom.

Any brilliant tricks for that?

Thank you!

[rad]

Hi @shughesd,

In that case, please use this tool

Ultimate CSS Gradient Generator from ColorZilla

With that tool, you can control every aspect of the gradient, you can also toggle on the IE support so it would also generate CSS for IE. Once the styling is generated, you’ll have to copy ans paste it with a block like this to header bar’s Element CSS

$el {

/* styling copied from that too; */

}

Example,

$el {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+20,2989d8+50,1e5799+80&0+0,0.8+15,1+19,1+81,0.8+85,0+100;Blue+Two+Sided+Transparent */
background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(30,87,153,0.8) 15%, rgba(30,87,153,1) 19%, rgba(30,87,153,1) 20%, rgba(41,137,216,1) 50%, rgba(30,87,153,1) 80%, rgba(30,87,153,1) 81%, rgba(30,87,153,0.8) 85%, rgba(30,87,153,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#001e5799',GradientType=0 ); /* IE6-9 */
}

But since you’re on X theme, then please copy that styling to your custom CSS for header (without $el { } )

Thanks!