Section Fade Transitions
- Regular price
- $25.00
- Sale price
- $25.00
- Regular price
-
Squarespace stacks sections edge to edge, so every join between two background colours is a hard line. Section Fade Transitions from SQS Mods softens those joins into a gradient, and the clever part is where the colours come from: the plugin reads the real background colour of the section above and below straight from your Squarespace colour theme each time the page loads. Change a section from Lightest 1 to Dark 2 and every fade touching it redraws itself, with no gradient to pick and nothing to re-export.
Where it goes further than a faded image
It reaches the seam between your last section and the footer, which most approaches miss. It covers Auto Layout, list and carousel sections even though they do not accept Code Blocks. Background images take ownership of their seam so you get one clean dissolve, inset backgrounds are handled, and the fade sits behind headings and buttons by default so text stays crisp. You set a desktop depth and a mobile depth once and the ratio applies everywhere.
Who it suits
Designers who want a softer, more editorial flow down a page without baking gradients into images, and site owners who change section colours often and do not want to redo transitions each time.
One honest caveat
It is Squarespace 7.1 only and needs Code Injection, so a Core plan or higher. It works per page by design rather than site-wide, and two very similar colours can show faint banding when magnified, which is true of any CSS gradient.
Installation
Paste the engine into footer Code Injection once, then drop a single Code Block on any page you want transitions on. Optional per-section markers let you change depth, use one edge only or switch a section off, and the setup guide includes a generator for them. One-time purchase covering unlimited sites.
