How to add gradient background to text

This tutorial will show you how to add 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’ then ‘Custom CSS’, and copy and 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, expressed 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.