Transparent Gradient Layer Not Showing Live

[kickinrad]

Hey there, I did a bunch of searching around the forums and I was able to figure out how to apply a transparent gradient over my header background on my own. At least, I got it to show up in Cornerstone.

However, when I save and go to my live site it does not show! I tried clearing cache and refreshing.

I created the CSS with https://www.cssmatic.com/gradient-generator and here is the code I put in the element section of my header bar. I want it to start solid, go to transparent, and then back to solid at the bottom.

$el .x-bg .x-bg-layer-upper-color {
background: rgba(35,21,70,1)!important;
background: -moz-linear-gradient(top, rgba(35,21,70,1) 0%, rgba(35,21,70,0.55) 50%, rgba(35,21,70,1) 100%)!important;
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(35,21,70,1)), color-stop(50%, rgba(35,21,70,0.55)), color-stop(100%, rgba(35,21,70,1)))!important;
background: -webkit-linear-gradient(top, rgba(35,21,70,1) 0%, rgba(35,21,70,0.55) 50%, rgba(35,21,70,1) 100%)!important;
background: -o-linear-gradient(top, rgba(35,21,70,1) 0%, rgba(35,21,70,0.55) 50%, rgba(35,21,70,1) 100%)!important;
background: -ms-linear-gradient(top, rgba(35,21,70,1) 0%, rgba(35,21,70,0.55) 50%, rgba(35,21,70,1) 100%)!important;
background: linear-gradient(to bottom, rgba(35,21,70,1) 0%, rgba(35,21,70,0.55) 50%, rgba(35,21,70,1) 100%)!important;
}

It shows up fine in my editor and looks great! Hopefully you can help, I am sure it is something silly I have overlooked. Thanks a ton!

[christopher]

Hi @kickinrad,

It should work, but maybe there is something missing there. I suggest that you consider using the method below:

1. Go to the bar in question and click the Customize tab and add hero to the Class option.
2. Then instead of the code that you shared, please use the code below to Pro > Theme Options > CSS:

.hero .x-bg .x-bg-layer-upper-color {
background: rgba(35,21,70,1)!important;
background: -moz-linear-gradient(top, rgba(35,21,70,1) 0%, rgba(35,21,70,0.55) 50%, rgba(35,21,70,1) 100%)!important;
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(35,21,70,1)), color-stop(50%, rgba(35,21,70,0.55)), color-stop(100%, rgba(35,21,70,1)))!important;
background: -webkit-linear-gradient(top, rgba(35,21,70,1) 0%, rgba(35,21,70,0.55) 50%, rgba(35,21,70,1) 100%)!important;
background: -o-linear-gradient(top, rgba(35,21,70,1) 0%, rgba(35,21,70,0.55) 50%, rgba(35,21,70,1) 100%)!important;
background: -ms-linear-gradient(top, rgba(35,21,70,1) 0%, rgba(35,21,70,0.55) 50%, rgba(35,21,70,1) 100%)!important;
background: linear-gradient(to bottom, rgba(35,21,70,1) 0%, rgba(35,21,70,0.55) 50%, rgba(35,21,70,1) 100%)!important;
}

• 

The only difference is that you do not use the Element CSS anymore and you added a class name instead and use that.
Please kindly consider that this is considered as customization and outside of our support scope. We will do our best to help, but we will not be able to implement the customization for you.

Thank you.