Primitus Consultancy

View Original

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.

See this content in the original post

Step 2

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

See this content in the original post

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.

See this content in the original post

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.

See this gallery in the original post

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.