How to create a text colour animation on Squarespace

**You can also check out our premium typing carousel effect plugin**

This tutorial will show you how to create a text colour animation similar to what is shown 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 animated text to be displayed, then insert the html code below.

 <h1 class="text-animation">Animated text colour</h1>

Animated text colour

---

Step 2

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

.text-animation
{
  background-image: linear-gradient(
    -225deg,
    #E7F2F8 0%,
    #74BDCB 29%,
    #FFA384 67%,
    #EFE7BC 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textchange 2s linear infinite;
  display: inline-block;
}

@keyframes textchange {
  to {
    background-position: 200% center;
  }
}

You can the change angle by change the deg value and the colours palettes see Canva for ideas - https://www.canva.com/colors/color-palettes/

---

**You can also check out our premium typing carousel effect plugin**

---

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.