Squarespace Gradient Divider
Squarespace Gradient Divider
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.

