Gradient Link Text in Squarespace

Gradients are all the rage. Here is a quick tutorial on how to get them up and running on SS.

I believe if you have a more thorough understanding of the code, you'll be better and quicker at building websites, so I try to teach you how to do things yourself rather than just giving you the code.

Gradients are background-images

In order to process a gradient using CSS, you have to use the background-image (or background) property.

background-image:linear-gradient(to right, blue, red) !important; 

There are a lot of values you can give the background-image including:

• linear-gradient, radial-gradient, conic-gradient, repeating-linear-gradient, etc.

• angle: to right, to bottom left, 215deg, etc.

• color: hex, hsl, rgba, etc.

• color stops: red 15%, blue 50%, purple 60%, orange 90%

Gradient Text

Again, there is no way to change the color of the text gradient, because the gradient is processed as an image. But you can add a gradient as a background image, clip the gradient background image to only show behind the text, then make the text color transparent so the background gradient shows.

p a { 
	background-image:linear-gradient(
  		to right, 
  		blue, 
  		red) !important; 
	-webkit-background-clip: text; 
	color:rgba(0,0,0,0) !important; 
}

Hope you found this helpful, shoot me some links of how you’re using gradients on your projects.