Add a Colour Gradient to Text

What does this code do?

This code snippet will allow you to add a colour gradient to text.

Create your CSS Gradient

First, decide on how you would like your gradient to look. Go to https://mycolor.space/gradient and design the gradient code you would like.

Save the code generated from the word “linear” to the “ ; ” . In the example above, I would save the code outlined in red.

linear-gradient(93deg, rgba(2,0,36,1) 13%, rgba(3,1,43,1) 15%, rgba(9,9,121,1) 43%, rgba(0,212,255,1) 78%);

Code Snippets

Copy and paste the following code into Design > Custom CSS.

SELECTOR h1 {
  background: -webkit-CODE GOES HERE;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Then change the word SELECTOR to one of the selectors below.

Squarespace 7.0

/* One Page */
#COLLECTIONID

/* The Whole Footer */
footer

/* The Top Footer Section */
.Footer-blocks--top

/* The Middle Footer Section */
.Footer-blocks--middle

/* The Bottom Footer Section */
.Footer-blocks--bottom

/* One Section */
#PAGEID

/* One Text Block */
#BLOCKID

Squarespace 7.1

/* One Page */
#COLLECTIONID

/* The Whole Footer */
#footer-sections

/* One Section */
#COLLECTIONID #page .page-section:nth-of-type(1)

/* One Text Block */
#BLOCKID

Then replace CODE GOES HERE with the code you saved from the Color Gradient Generator. For example, your code will look something like…

SELECTOR h1 {
  background: -webkit-linear-gradient(93deg, rgba(2, 0, 36, 1) 13%, rgba(3, 1, 43, 1) 15%, rgba(9, 9, 121, 1) 43%, rgba(0, 212, 255, 1) 78%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

One Word/Sentence

To target one sentence or one word, it may be easiest to use a code block.

Copy and paste the following within a code block.

<p>I want <span class="gradient-text">this</span> word to have a gradient.</p>

Then copy and paste this code into Design > Custom CSS

.gradient-text {
  background: -webkit-CODE GOES HERE;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

How To Use It

1. Use https://mycolor.space/gradient to create the colour gradient you would like. Save the code from “linear” to the “ ; “

2. Copy and paste the code snippet as indicated above.

3. Choose the selector that matches your situation.

4. To learn how to find a collection id, page id, or block id check out our Start Here guide.

5. If targeting one section in Squarespace 7.1, change the 1 to match the section you are trying to change.

6. If targeting one sentence or one word, you can change the class name from gradient-text to any other appropriate name. Be sure to also change it in the css (but keep the “ . ” in front).

7. Change h1 to target the type of text you want to change.

   • h1 = Heading 1

   • h2 = Heading 2

   • h3 = Heading 3

   • h4 = Heading 4

   • p = Body Text (all paragraphs; there is no p1, p2, p3 etc.)

   • a = Link

8. Note that we have the -webkit- in front of the word linear to help support your gradient across multiple browsers.