How to create gradient text in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

In this tutorial, you'll learn how to create gradient text in Squarespace!

We'll be using an H1 as an example but you can apply this same technique to any text type as long as you target the right code name.

Don’t want this to happen on every single page on your site? Check out this blog post to learn about the two ways you can install CSS on a single page in Squarespace.

Learn more about cool gradient codes at insidethesquare.co/gradient

Here is the main code from the tutorial:

h1 {
background: -webkit-linear-gradient(45deg, red, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h1:hover {
background: -webkit-linear-gradient(90deg, red, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Want to apply this code to a single block of text? Grab the block ID with this free Chrome extension.
I am not affiliated with this extension or the people who created it, but I do use it in my own work.