Buttons & Text EffectsCSS Only: Any Plan

Gradient Text Headings for Squarespace

Gradient text is everywhere in modern branding, and you can have it on Squarespace headings without images or plugins. This snippet paints your H1 and H2 text with a CSS gradient using background-clip, wrapped in an @supports rule so browsers that cannot clip backgrounds to text fall back to a solid brand color instead of invisible headings. Change the two gradient stops to your own palette, and narrow the selector if you only want the effect on specific headings.

The Code

cssCSS (Design > Custom CSS)
/* Fallback color for browsers without background-clip: text */
h1, h2 {
  color: #c9974a;
}

/* Gradient text where supported */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  h1, h2 {
    background-image: linear-gradient(90deg, #c9974a, #e6c98a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

How to Install It

  1. 1Go to Design > Custom CSS (Website Tools > Custom CSS on newer dashboards).
  2. 2Paste the snippet and replace the two gradient color stops with your brand colors.
  3. 3To limit the effect, change the h1, h2 selector to something narrower, for example h1 only, or scope it to one section with its data-section-id.

Compatibility and Plan Requirements

Squarespace 7.1 and 7.0. The @supports rule keeps headings readable in browsers without background-clip support. Narrow the selector if your template also uses h1 or h2 inside navigation.

This snippet is pure CSS, so it works on any Squarespace plan, including Personal, through the Custom CSS panel. No Business plan needed.

Want This Done For You?

If you would rather not touch code, or you need something bigger than a snippet, I build custom Squarespace features for clients every week: widgets, search and filter tools, integrations, and full sites.

Squarespace Development Services Get in Touch