SQSMODS · Squarespace 7.1 Plugin
Sections that
dissolve into each other.
Squarespace stacks your sections edge to edge, and every join is a hard line. Section Transitions fades each edge into the color of the section next to it — reading that color live from your theme, so the gradient follows when you change your mind.
One-time purchase · Unlimited sites and pages · Free updates · Squarespace 7.1, Core plan or higher
Reads the color next door
No gradient to pick. It takes the background color of the sections above and below and builds the fade from them.
One block per page
Drop a single Code Block anywhere on a page and every boundary on it softens. Other pages stay untouched.
Follows your theme
Re-theme a section and every gradient touching it redraws. Nothing to re-export, nothing to update by hand.
Tune it section by section
Change how far a fade reaches, use one edge instead of two, or leave a section sharp. Set on the live page, not in a file.
Reads Your Section Color Themes
You never pick a gradient color.
There is no color picker, because there is nothing to pick. Section Transitions reads the real background color of the section above and the section below, straight from your Squarespace color theme, and builds the transition out of them. Switch a section from Lightest 1 to Dark 2 and every gradient touching it redraws on the next load. The color is never stored anywhere — that's the whole point.
01 — Live Color
Change the section. Watch the transition follow.
01.1
Redesign the site, keep the transitions
This is the part you can't get by dropping a faded image on a section edge. That image is right once — change the section behind it and the hard line comes back, so you go and make it again, at every screen size, for every seam.
Here the color isn't saved anywhere. It's read from your section every time the page loads, so re-theme whatever you like and every transition touching it is correct on the next refresh. Try it: pick a color on the right and watch the fade above it redraw.
Section 02's color theme
02 — Coverage
It works in the places transitions usually fail.
02.1
The footer seam
The join between your last section and the footer is the one most transitions never reach, because the footer sits outside the page's section list. This one crosses it.
02.2
Carousels and Auto Layout
Auto Layout, list and carousel sections accept no Code Blocks at all. The page-level block covers them anyway — or you can aim at one from a neighboring section.
02.3
Background images
Where a photograph meets a color, the photograph's side takes ownership of the seam. You get one clean dissolve instead of two gradients fighting over the same line.
02.4
Inset backgrounds
Background Width: Inset is handled. The gradient spans the section's full width, including the inset margins, because those margins are part of the section being dissolved.
02.5
In front, or behind
By default the fade sits behind your headings, buttons and image blocks so text stays crisp. One setting lifts it in front when the thing you are dissolving is an image block.
02.6
Mobile, proportionally
Set a desktop depth and a mobile depth once. The ratio between them is applied to every gradient on the site, per-section overrides included. Write one number.
03 — While You Build
Visible in the editor, not just in preview.
03.1
You see what you're building
The gradients render inside Squarespace's section editor, so you can judge a depth while you are setting it rather than jumping to Preview after every change. The fade is always on while you work — there is no mode to remember and nothing to switch.
03.2
Preview is still the truth
Squarespace draws its own chrome over the page while you edit — rounded section cards, ADD SECTION bars, selection outlines — all of which exist to show you where sections begin and end. So a boundary can look harder in the editor than it really is. The fade is rendering; check Preview to judge it.
04 — Straight Answers
What it doesn't do.
Squarespace 7.1 only
7.0 templates use a different section structure and are not supported. You also need the Core plan or higher, because that's where Squarespace unlocks Code Injection.
One gradient per boundary
If both neighbors claim the same seam, one wins and the browser console tells you which. Two mismatched fades painted over the same line is not a feature worth having.
Very close colors can band
Two colors a few levels apart in one channel will show faint steps when magnified — true of every CSS gradient, and worse in a baked image. Reducing the depth or nudging one color fixes it.
Automatic per page, not per site
You don't have to touch sections one by one — a single block switches on an entire page at once. But it only ever affects that page. There's no site-wide switch that dresses everything for you, and pages you don't mark stay exactly as they are. That's deliberate: you decide where it applies.
FAQ
Questions we get asked a lot.
No. The whole install is pasting one block into your footer code injection and one line into a Code Block on the page. The optional per-section markers are copy-paste too — the setup guide has a generator that writes them for you.
The Squarespace Core plan or higher. The engine installs through site-wide Code Injection, which Squarespace only unlocks on Core and above. If you can open Settings → Advanced → Code Injection, you're set.
Yes — 7.1 only. It reads the real background color of each section rather than guessing from a template, so there's no per-template setup and no custom CSS to write. Squarespace 7.0 uses a different section structure and isn't supported.
No. It's a tiny dependency-free script, minified and served from a global CDN, plus a stylesheet it writes itself. There are no image files, no fonts and no extra requests per gradient. The image-based approach it replaces costs you a download per transition.
The gradient changes with it. The color is read from the section on load, not stored in a setting, so every fade touching that section is correct on the next refresh. Nothing to re-export and nothing to remember.
Yes, and that's the default. Pasting the engine into your footer changes nothing anywhere. A page only gets transitions once you put a block on it, and that block never affects any other page.
Yes. A Code Block inside a section overrides whatever the page-level block decided for it — set a different depth, use only the top or only the bottom edge, paint the gradient in front of your content, or switch that one section off entirely. The setup guide lists every marker in a single table.
Auto Layout, list and carousel sections don't accept blocks at all. The page-level block covers them anyway, and if you need per-section control you can aim a marker at one from the section above or below it.
No. The gradient sits behind the section's content by default, so text, buttons and image blocks stay crisp in front of it. If the thing you actually want to dissolve is an image block, one attribute lifts the fade in front — just keep your copy out of that edge when you use it.
No. The gradients are decorative CSS layers that ignore pointer events entirely — no content is moved, hidden, wrapped or duplicated, and nothing is inserted into your text. Your pages, URLs and metadata are unchanged.
That's 8-bit color, not the plugin. A screen has 256 levels per channel, so a gradient can only step through as many shades as separate the two colors — magnify it and each step becomes an edge. Every CSS gradient behaves this way, and a compressed PNG behaves worse. Reducing the depth tightens the steps, and nudging one of the two section colors removes them. Over a photograph you won't see it at all.