How to create gradient text in Squarespace

If you're ready to give your Squarespace website a splash of color in a creative new way, this tutorial is for you! In the video below, I’ll walk you through how to use a simple bit of custom CSS to add gradient effects to your text—and it looks amazing.

In this tutorial, you’ll learn exactly how to apply gradient text in Squarespace using a small but mighty piece of custom CSS. I’ll show you how to customize it with your own colors, limit it to specific sections using block IDs, and avoid common mistakes that mess with the layout. You'll also get links to my favorite gradient generators and a free guide to help you build your own color combinations from scratch.

Watch the full video below, then scroll down to grab the code and follow the detailed steps!

How this gradient text code works

The trick behind gradient text is using the background of an element—but only showing that background inside the shape of the letters. Here's what’s happening in the code:

• background: linear-gradient(...) tells the browser what gradient colors and direction to use.

• -webkit-background-clip: text; clips the background inside the letters only.

• -webkit-text-fill-color: transparent; makes the letters themselves see-through, so the gradient background shows through instead.

This combo turns normal text into beautifully blended, multicolor magic. Just swap out the gradient colors for your own combo, and boom—you’ve got a fully custom look.

---

How to Create Gradient Text in Squarespace

1. Go to your CSS pannel.
   Navigate their quickly by pressing the / key in your keyboard to open up the program search.
   This is where you’ll paste the code. If you don’t see the menu, press / and type “CSS” to find it.

2. Paste the gradient CSS code
   You’ll find the full code below from the tutorial. When you paste it, your H1 headers will instantly update with the gradient effect.

3. Customize your gradient
   Adjust the linear-gradient value to use your own colors. You can change the colors like (red , yellow) (purple, teal) or (#ad9d99, #6A82FB, #FC5C7D)

4. Leave the WebKit lines alone
   These are required to clip the gradient into the shape of your letters. Removing them will break the effect.

5. Target specific content blocks (optional but awesome!)
   If you only want the gradient to appear in one section, use a block ID. More on that below!

/* gradient text code from insidethesquare.co */ 
h1 {
  background: linear-gradient(red, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

---

Free Guide to Gradients

30 + codes & info on how to use them

GET THE GUIDE →

---

How to Target a Specific Content Block with a Block ID

Let’s say you only want one section of your page to have gradient text—like a headline in a featured section. Here’s how you do it:

1. Install the free Chrome extension "Squarespace ID Finder."
   Access the Squarespace ID finder Chrome Extension here (opens in new tab)
   Turn it on while viewing your site, and it will reveal all the unique IDs for each block.

2. Copy the block ID for the section you want.
   It will look something like #block-1234

3. Update your CSS code like this:

   This tells Squarespace: only apply this effect to the H1 text inside that specific block.

/* gradient text code from insidethesquare.co */ 
#block-1234 h1 {
  background: linear-gradient(red, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

💡 Pro Tip:
If you’re unsure what type of text (H1, H2, etc.) is in that block, you can use an asterisk * as a wildcard instead—but only if there’s one text element inside the block.