Animated Gradient Text Logo

 

Animated Gradient Text Logo

Follow the simple steps below for a quick install. This plugin works with the Brine template family.


Submitted by Moov Labs

 
 
 

Look Demo

AnimatedGradientLogoText.gif

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 Text Logo //

.has-site-title .Header-branding {
  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 #53D6FF, #666BE1, #E45372, and #F07C63 color values to the colors of your choice.

Keep in mind that this code only works with text logos / site titles – not uploaded image logos.

Do not change any values to the Animation Keyframes.

Save and refresh the page. 👍

Moov Labs