Alter this code to create fade effect

Fade on what event? What will happen for it to fade?

I dont mean for it to be an action. I need a gradient fade of the color.

Is that what your asking? Im so new its unrealistic. Sorry

Try a CSS generator for this https://www.colorzilla.com/gradient-editor/

Im trying to create this effect. I want my header background color to fade into the bar above my slider. I think this explains myself a little better maybe, lol. Thanks

https://thegreenhousedepot.com

This is my site

I like the tool you suggested. However, I have no idea where to put the code it generated. Can i just place it in the color section of the code I entered above?

Sure, in here:

header.tc-header {
 border-bottom: 12px solid #4a7023;
}

E.g,

header.tc-header {
 border-bottom: 12px solid #4a7023;
 background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
 background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

That give my entire header section a gradient. You can see a dark green border above my slider on my website. I just want that little strip of green to be faded. The first code I provided allows me to change the color and thickness of that strip but I would like to make it more subtle.

Did you resolve this?

Not yet but I will keep the post up to date if I do.

Oh I see what you’re trying to do now.

I don’t think you can achieve this by using a border.

Try removing the border and instead use the “before” pseudo selector to style a make-shift element before the slider.

Try this CSS:

#customizr-slider {
 position: relative;
}

#customizr-slider:before {
 content: "";
 position: absolute;
 width: 100%;
 height: 10px;
 top: -10px;
 left: 0;
 /* Enter your background gradient stuff here */
}

That is perfect! Thanks a billion. Is there anyway to do the same thing to the bottom of the slider? I think that looks so nice Id like to try on both top and bottom.

Try this:

#customizr-slider {
 position: relative;
}

#customizr-slider:before,
#customizr-slider:after {
 content: "";
 position: absolute;
 width: 100%;
 height: 10px;
 left: 0;
 /* Enter your background gradient stuff here */
}

#customizr-slider:before {
 top: -10px;
}

#customizr-slider:after {
 bottom: -10px;
}

Works perfect with my shadow. Thanks so much!