Add an Animated Gradient Fill to Text on Squarespace
Here’s a fun CSS hack to add an animated gradient fill to any text on Squarespace!
Original post:
https://ajmexperience.com/learn-posts...
For more CSS code to enhance your website designs, check out the rest of the learn series:
https://ajmexperience.com/learn
Get our free CSS Selector Cheat Sheet:
https://www.ajmexperience.com/css-che...
Get our full CSS Library:
https://www.ajmexperience.com/squares...
——————
HERE'S THE CSS:
Tip! Change h1 to h2, h3, h4, or p as needed. See bottom of post for how to find the block ID.
#BLOCK-ID h1 {
background: linear-gradient(to right, #319aab, #7cccbd, #fac827);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent
animation: gradientAnimation 6s ease infinite; }
@keyframes gradientAnimation {
0% {
background-position: 0% 50%; }
50% {
background-position: 100% 50%; }
100% {
background-position: 0% 50%; }}
NOT SURE HOW TO FIND BLOCK AND SECTION IDS?
Here’s how to target blocks, sections, or pages →
https://www.ajmexperience.com/learn-p...
And here’s how to find block, section, and page IDs →
https://www.ajmexperience.com/learn-p...
CHECK OUT OUR OTHER GRADIENT HACKS:
Add gradient fill to text background box
https://www.ajmexperience.com/learn-p...
Add still gradient to text fill
https://www.ajmexperience.com/learn-p...
Squarespace announcement bar gradient fill
https://www.ajmexperience.com/learn-p...
Gradient line in Squarespace
https://www.ajmexperience.com/learn-p...
Gradient buttons in Squarespace
https://www.ajmexperience.com/learn-p...
——————
AJM EXPERIENCE
🖥 A marketplace for graphic designers, Squarespace lovers, & CSS nerds: https://www.ajmexperience.com/
☕️ Buy me a coffee: https://www.buymeacoffee.com/ilyajm
Thanks for watching and hope you learned something. My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed well over 100 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.
——————
This article contains affiliate links. Whenever you buy something through one of these, I get a small commission, without any extra cost to you :)