Jump to content

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

Recommended Posts

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; 
}

 

Screen Shot 2021-01-05 at 12.43.00 PM.png

Link to comment
  • Replies 7
  • Views 705
  • Created
  • Last Reply
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!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.