GIF Text

Look Demo

Fill in any header text with an animated GIF instead of solid color – this one’s pretty cool! This plugin uses css editor and works with all template families.


How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// GIF Text //

h1 {
  background: url(GIF-URL-HERE.gif);
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  color: transparent;


Change the h1 text property to the one you’d like to target. This can be either h1, h2, or h3.

Add in your animated GIF by replacing GIF-URL-HERE.gif with your own link.

Font family, style, and size can all be adjusted in the Site Styles settings.


No notes.