Squarespace Gradient Divider

gradient divider.png
gradient divider.png

Squarespace Gradient Divider

$10.00

A warm, hand-finished gold gradient for your Squarespace section dividers — a small detail swap that makes your page feel intentional instead of default.

What You're Getting

A single, lightweight SVG snippet that replaces the flat gray of Squarespace's built-in divider line with a rich, brushed-gold gradient. No plugins, no page-speed hit — just a few lines of code pasted into your site.

Features

  • Warm metallic gradient — a smooth blend from smoky charcoal through champagne gold, designed to catch the eye without overpowering your layout

  • Copy-paste install — drop the SVG into a Code Block, add one line of CSS, done

  • Fully editable — every color stop is plain hex/RGB, so you can retune it to match your brand in seconds

  • Section-targeted — built to apply to a specific section's divider, so the rest of your site is untouched

  • Lightweight — pure SVG and CSS, no external assets or scripts

Who It's For

Squarespace users who want their divider lines to feel custom-designed rather than off-the-shelf — wedding and event sites, boutique brands, restaurants, or any page leaning into a warm, elevated aesthetic.

What's Included

  • The gradient SVG code

  • The CSS snippet to apply it to your divider. Can be applied by section[data-section-id=""], #collection, or .page-section:last-child.

Requirements

  • A Squarespace 7.1 site

  • Comfort pasting code into Website - Pages - Custom Code - Code Injection - Header.

Support

This is a static code snippet, not a plugin — if your section ID changes or you move the divider to a new section, you'll need to update the CSS selector accordingly.

Example

https://sitkaexpeditions.com/

Add To Cart