Animated Gradient Header Text

 

Animated Gradient
Header Text

Follow the simple steps below for a quick install. This plugin works with all template families.


Submitted by Moov Labs

 
 
 

Look Demo

Step One

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Two

Copy and paste the code below into the Custom CSS Editor box.

// Animated Gradient Header Font //

h1 {
  background-image: linear-gradient(-45deg, #53D6FF, #666BE1, #E45372, #F07C63) !important;
  background-size: 400% !important;
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-animation: Gradient 10s ease infinite !important;
  -moz-animation: Gradient 10s ease infinite !important;
  animation: Gradient 10s ease infinite !important;
}

// Animation Keyframes //

@-webkit-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes Gradient { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

Step Three

Change the “h1” value to the header you’d like to target - this can either be h2 or h3.

Change the #53D6FF, #666BE1, #E45372, and #F07C63 color values to the colors of your choice.

Do not change any values to the Animation Keyframes.

Save and refresh the page. 👍

Moov Labs