Gradient Headers

[ajenks]

Is there a way to generate a Header with a gradient in Source? Right now I’m using a stack from Doobox called Header Pro but the options in this stack are very limited I can give it a gradient but that’s about all I can do, it doesn’t even have an option to adjust font weight. Below is a link to the site that is under construction, you can see the current gradient header that I have using Font Pro from doobox but I want to increase the weight of the font and I’m unable to with this stack so I’m on the hunt for another solution.

https://sandbox1.asjdesigns.com

Thanks,
Arlen

[Anon]

Maybe
https://onelittledesigner.com/rapidweaver-stack/masked-text

[jamessouttar]

Style up your heading in a Header (Source) stack. Then add this CSS into your site or page code panel in RW:

.gradient_fill {
background: linear-gradient(to right, rgba(239, 114, 135, 1.00), rgba(50, 111, 136, 1.00)) ; 
background-size: 100%; 
background-position:0% 0%; 
background-clip: text; 
-webkit-background-clip: text;
-moz-background-clip: text; 
text-fill-color: transparent; 
-webkit-text-fill-color: transparent; 
-moz-text-fill-color: transparent;
}

You don’t have to call it .gradient_fill — you can call it whatever you wish (just note that the class name must begin with a full-point). Also the color references for ‘background’ are those you‘re currently using — change these if you need.

Then add gradient-fill (without the full point) in the ‘CSS Styles’ box in the controls for the Header (Source) stack, like so:

This will work — I’ve just tested it. Just add the class name (as above) into each Header stack you want to apply it to.

James

[Webdeersign]

@jamessouttar

.gradient_fill

Don’t forget to add the H1 after .gradient_fill so that you have .gradient_fill h1 or adjust to whatever type of header you are using.