Squarespace Parallax: How to Add the Effect

To add a Squarespace parallax effect, click the image block you want to animate, click Edit, open the Design tab, and choose Image Effects. Select Parallax from the options on the right, then use the slider settings to adjust intensity and zoom.

What the Squarespace parallax effect actually does

Parallax means the background image moves slower than the content in front of it as you scroll. Your brain reads that difference in speed as depth, which is why the effect makes a flat page feel like it has layers.

Used well it does three things: adds visual interest to a section that would otherwise be static, draws the eye to a hero image or a call to action, and slows people down slightly as they scroll past. Used everywhere, it just makes a page feel unsettled.

My rule on client sites is one parallax section per page, usually the hero or a single feature block.

Adding the effect step by step

Go to the section with the image you want to animate and click the image block, then click Edit.

In the edit menu, open the Design tab and select Image Effects. This is where Squarespace keeps the styling options that aren't in the main editor.

On the right-hand side, about halfway down the menu, you'll find Parallax. Click it and the effect turns on immediately.

Save the page, then scroll past the section on the live site. The effect only reads properly at full scroll, not in the editor preview.

Tuning intensity and zoom

Click the three-slider settings button and you get two controls.

Intensity sets how far the image shifts relative to the scroll. Low values look intentional. High values look like the image is sliding out of its frame, and on shorter sections they can crop the subject out of view entirely.

Zoom scales the image during the scroll. A little zoom hides the edges that intensity exposes, which is usually why you need it.

Both preview live as you drag. Start conservative, then increase until it's noticeable and stop there. If a visitor consciously notices the effect, it's turned up too far.

Picking an image that survives the effect

Parallax crops as it moves, so the image needs room to give.

Use something high resolution, at least 2000px wide, because the zoom will magnify any softness. Choose an image where the subject sits near the middle rather than the edges, since the edges are what get eaten. And avoid images with text baked into them, which will drift out of alignment with everything else on the page.

Landscapes, textures and wide environmental shots all work well. Tight product shots and portraits generally don't.

Checking mobile before you publish

Parallax behaves differently on phones. Mobile browsers handle scroll-linked effects less smoothly than desktop, and some throttle them for battery, so an effect that's elegant on a laptop can stutter on an older phone.

Load the page on an actual device rather than resizing your browser window. If it stutters or the crop cuts your subject in half, either dial the intensity down or accept that it's a desktop flourish.

If you want something more controlled, like an effect that only runs on desktop or a genuinely custom scroll interaction, that's custom code territory rather than a built-in setting.

Frequently asked questions

Why isn't my parallax effect working?

Two usual reasons. You're looking at the editor preview instead of the live page, where scroll effects don't run properly. Or the section isn't tall enough for the scroll to register, so give it more height and test again.

Does parallax work on mobile in Squarespace?

It does, but less smoothly, and some mobile browsers reduce scroll effects to save battery. Always test on a real phone rather than a narrow browser window.

Can I add parallax to a whole section background?

The built-in Image Effects apply to image blocks. For a full-bleed section background with parallax, you're into custom code, or you can use a video background instead.

Does parallax slow down my page?

The effect itself is cheap. The large image it needs is not, so compress before uploading. An uncompressed hero image is what actually slows the page.

Want a scroll effect that does something more specific than the built-in slider allows? Book a free call and I will tell you what it takes.

I'm Dylan, the designer behind Highr Labs and a Squarespace Circle Platinum Partner. I build custom Squarespace sites for businesses in Utah and across the US. More about me, or book a free call if you want to talk through a project.