Gradient Start and Finish over Text Instead of Over Entire Block?

Site URL: https://tulip-lemon-r3lh.squarespace.com

Hi there,

I am wondering if there's a way through CSS or HTML to have the gradient start and finish with the placement of text instead of spanning the width of the site. Therefore, for example, my left-aligned text uses one part of the gradient and the right-aligned text uses a different part of the site-wide background gradient. I'd like both text blocks to be identical in terms of starting gradient color and ending gradient color.

Thank you!

h2{ 
 background-image:linear-gradient(to left, #f15922, #f4c339) !important; 
 -webkit-background-clip: text; 
 color:rgba(0,0,0,0) !important; 
}

The link you provided is private so I couldn't see what you were talking about.

13 hours ago, tazmeah said:

The link you provided is private so I couldn't see what you were talking about.

Hi @tazmeah,

The site isn't live yet. It's still being built out. Sorry about that. To further explain, the code I had provided in my original post allows me to use a gradient background image and clip it to fit the two text blocks I have on a test page. As a result the gradient is different for each of the two text blocks. I would like both text blocks to have the same gradient from start to finish. Is this possible?

Thanks!

If your site is private/trial, you can setup password & share url.

13 hours ago, tuanphan said:

If your site is private/trial, you can setup password & share url.

@tuanphanDone! The password is mz381381.

On 1/8/2021 at 4:39 AM, gogreenmsu said:

@tuanphanDone! The password is mz381381.

Text or button?

On 1/10/2021 at 1:39 AM, tuanphan said:

Text or button?

Text, please (sorry for the delay I was out on travel)!

On 1/16/2021 at 2:42 PM, gogreenmsu said:

Text, please (sorry for the delay I was out on travel)!

Hey @tuanphan,

Any thoughts on this?

Thanks!