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.

ezgif-3-fdcf1f81a337.gif

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

Customize

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.

Notes

No notes.