Gradients in Squarespace [VIDEO]

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 images! Not colors.

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.

4 Skills to Master Squarespace Custom CSS

4 Skills to Master Squarespace Custom CSS

FTC on Equifax Settlement: "You will be disappointed with the amount you receive"