How to Add a Colour Gradient to Your Squarespace Website

Have you ever wanted to add something a bit more unique to your Squarespace website?

Well, besides adding custom fonts, one of my favorite ways to make a website more unique is to add color gradients! Sometimes plain text or backgrounds leave your website looking too much like a template. Color gradients ensure your design stands out.

In this tutorial video I show you how to add gradients to the following elements:

• Text

• Buttons

• Backgrounds

Or Like This

Watch the video for the full tutorial! I have provided all of the CSS below, with guides on how to use each code snippet.

CSS for Text Gradients

To create text gradients for your Squarespace website, first copy and paste this code snippet into the box for custom CSS on your website.

#PAGE-ID h1 {
  background: -webkit-linear-gradient(left, #F2C5E0, #EC8FD0, #D43790, #870A30);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Then you will need to customize the CSS for your website with a few simple steps.

1. Replace the placeholder “#PAGE-ID” with the actual ID for the page you are working on. I show you how to find your page ID using Chrome Developer Tools in the tutorial video.

2. Replace “h1” with whatever text size you are trying to change. “H1” means the CSS will affect your Heading 1. But you can change this to affect your other heading sizes instead. I don’t suggest using gradient text for your paragraphs, because it will make your text hard to read. Remember, as awesome as custom gradients are, it’s more important to make sure your website is easy to use.

3. Next, you’ll need to change your colors. Replace the hex codes in this CSS snippet with the hex codes of your brand colors. This is how you make your gradient text perfectly match your website colors to wow your visitors! (Click here to learn more about hex codes.)

4. Finally, you can change the direction of the fade in the text. The word “left” in the CSS snippet means that the gradient will go from left to right. But you can change this to “top,” “bottom,” or “right,” to change the direction of the fade. For an example, take a look at the the gradient text below.

You can change the gradient from top to bottom.

Or bottom to top.

Applying Gradients to Just a Small Text Portion

If you would like to add the color gradient to just a small portion of text on a page, the process is a little different. We have to create a new CSS class to style coloured text. To do that, copy and paste the snippet below and replace the .NAME placeholder with whatever you wish to name your class. In the tutorial video above, I replace the “NAME” placeholder with “coloured”.

.NAME {
  background: -webkit-linear-gradient(left, #F2C5E0, #EC8FD0, #D43790, #870A30);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Next, you will need to go into to the page section you are trying to add gradient text to, and add a code block within the page text. Just copy and paste this snippet into a code block and edit the text in between the code.

<p>I want <span class="coloured">this</span> word to be coloured.</p>

This process can seem a little bit complicated, so watch the video for the detailed tutorial!

CSS for Button Gradients

Want to add a gradient to your buttons instead of text? The CSS is almost the same. Just copy and paste the snippet below!

#PAGE-ID .sqs-block-button .sqs-block-button-element--medium {
  background: -webkit-linear-gradient(left, #F2C5E0, #EC8FD0, #D43790, #870A30);
}

Like the CSS for text gradients, you will need to customize the page ID, color hex codes, and the direction of the fade.

If you want to create just one gradient button on the page, you can do that too. Instead of pasting the page ID at the beginning of the CSS snippet, paste the button ID. You can easily find the button ID using the Squarespace ID Finder Chrome extension.

For more customization, learn how you can add a shadow to your buttons.

CSS for Squarespace Background Gradients

Lastly, you can apply a color fade to a whole section background! Just copy and paste this CSS snippet into your Squarespace website.

#PAGE-ID{
  background: -webkit-linear-gradient(left, #F2C5E0, #EC8FD0, #D43790, #870A30);
}

At this point, you know the drill. Edit the page ID, color hex codes, and fade direction.

Now you have a flashy page with a customized gradient background. If that doesn’t make your Squarespace website design unique, I don’t know what will!

Here are some other posts you may like:

• How to Use Anchor Links to Jump to a Specific Spot on a Page

• Adding a 4th Heading Style to Your Squarespace Website

• How to Change the Background Image to a Colour When on Mobile