How to add gradient background to text

This tutorial will show you how to create a gradient background to your text similar to the one below. This will work for Squarespace 7.0 and 7.1

Complexity: Easy

---

Step 1

Create a code block on the page you want the text to be displayed, then insert the html code below.

<h2 class="textgradient">Our Team Makes it Easy</h2>

Our Team Makes it Easy

---

Step 2

To add the following CSS, go to ‘Design’ and the ‘Custom CSS’, paste the code into the Custom CSS editor box.

// Text Gradient
.textgradient{
  background: -webkit-linear-gradient(180deg, #d23e70, #382b7d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

---

Step 3

To change the gradient colours as well as the angle of orientation, you will need to edit this line of the CSS code.

background: -webkit-linear-gradient(180deg, #d23e70, #382b7d);

---

You can also look at our “How to create a text colour animation on Squarespace” blog.

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.