Ghost has a new look! Orders and accounts made before October 19th, 2026 are available on our legacy platform.
Ghost Plugins
Legacy Plugin

Animated Gradient Text Logo

HeaderCSSAll versionsFree
Animated Gradient Text Logo preview

The original library, featuring hundreds of free copy-and-paste plugins for Squarespace. These legacy plugins are preserved as they were originally released and are available as-is. For no-code plugins with visual editing and live previews, explore the current plugin library.

Overview

Add an animated gradient color style to the text logo / site title. This plugin uses css editor and works with the Brine template family.

Plugin Delivery

Free Plugin

This is a free plugin from the original Ghost Plugins library. Copy the code below and paste it into your Squarespace site. No purchase or account needed.

Squarespace Compatibility & Requirements

Compatibility notes preserved from the original release.

All versionsSupported
Custom CSSRequired

Customizable Options

  • From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.
  • The desktop and mobile site titles do not use the same name, so this plugin includes code that targets both. Keep in mind that this code only works with text logos / site titles - not uploaded image logos.
  • Change the #53D6FF, #666BE1, #E45372, and #F07C63 color values to the colors of your choice.
  • Do not change any values to the Animation Keyframes.
  • This plugin comes with an Unlimited Use License. View License Terms

Install

Legacy plugins install by hand, there is no Plugin Studio build for this one.

  1. 1Copy the code from the Code Documentation section below.
  2. 2In Squarespace, open Website, Pages, Website Tools, Custom CSS for CSS, or Settings, Advanced, Code Injection for HTML and JavaScript.
  3. 3Paste the code, save, then refresh your site to see the plugin running.

Code Documentation

CSS
// 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;
}

// Animated Gradient Mobile Text Logo //

.has-site-title .Mobile-bar-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%}
}

Classes and Styling

Selectors and variables this plugin uses, target them in Custom CSS to restyle it.

.has-site-title.Header-branding.Mobile-bar-branding

FAQ

Answers to common questions about setup, customization, and troubleshooting.

Is this plugin free?

Yes. Legacy plugins are free to use on any site, no account or purchase needed.

Will it work on my Squarespace version?

Legacy plugins were built for the version noted in Squarespace Compatibility & Requirements and are provided as-is. Newer platform changes may require small tweaks.

Can I customize it?

Yes. Edit the values in Script Settings or override the selectors listed under Classes and Styling in your Custom CSS.

Do you support legacy plugins?

Legacy plugins are no longer updated. For maintained plugins with Plugin Studio and ongoing support, browse the current plugin library.

Changelog

A history of updates released for this plugin.

Original release

Archived exactly as it shipped in the original plugin library. No further updates are planned for legacy plugins.

Community

Give claps, share your site, and talk with others using this plugin.

Community

0 claps

Show thanks for this plugin.

Loading…