How to Create a Scrolling Logo Carousel in Squarespace (With CSS Code)
Want to add a smooth, automatic scrolling logo carousel / marquee effect to your Squarespace site? This tutorial will show you exactly how to do it using a gallery section and a few lines of custom CSS code — no JavaScript or plugins required!
What You’ll Need
A Squarespace website (7.1 or later)
Access to Custom CSS (available on the Squarespace “Core” plan and higher)
A set of logo images you want to display
Optional: A Canva account if you need to edit and resize the logos
Click here to download & customize my free logo template in Canva →
Click here to watch my tutorial explaining how to edit and resize your logos in Canva →
Step 1: Add a Gallery Section
Edit the page where you want your scrolling logos to appear.
Add a new section and choose one of the “Images” layouts with the ⓘ next to it. (You might need to scroll down in order to find it).
Once you’ve added the section, select “edit section” and make sure that Grid: Simple is selected.
Then, set your Aspect Ratio (for this tutorial, I recommend 16:9 Widescreen)
Upload your logos — ideally all the same height and width for a clean, consistent look. For the best visual results, use transparent PNGs.
💡 Pro Tip: To create a seamless, continuous scroll effect, you may need to repeat your logos multiple times in the gallery. This ensures that as the first set scrolls out of view, the next set appears immediately — keeping the loop smooth with no empty gaps.
For example, if you have 8 unique logos, try duplicating them until you have around 24 images total (so each logo appears 3 times). This gives the animation enough content to scroll continuously without visible breaks.
Turn off any gallery features like captions, hover effects, or lightbox pop-ups.
Step 2: Add the Scrolling Effect with CSS
Now we’ll make the gallery scroll continuously using CSS code.
In the Squarespace editor, go to
Design → Custom CSS.Copy and paste this code:
/* --- SCROLLING LOGO CAROUSEL --- */
#page {
overflow-x: hidden;
}
.gallery-grid-wrapper {
display: flex !important;
animation: slideshow 50s linear infinite;
will-change: transform;
}
.gallery-grid-wrapper .gallery-grid-item {
min-width: 11%;
margin-right: 2%;
}
@keyframes slideshow {
0% { transform: translateX(0%); }
100% { transform: translateX(-225%); }
}
/* --- MOBILE STYLES --- */
@media only screen and (max-width: 640px) {
.gallery-grid-wrapper {
display: flex !important;
animation: slideshow 20s linear infinite;
will-change: transform;
}
.gallery-grid-wrapper .gallery-grid-item {
min-width: 30% !important;
margin-top: 0% !important;
}
}Step 3: Adjust the Speed & Spacing (Optional)
You can customize a few parts of the code as needed:
Animation Speed:
Change 50s to a higher number for slower movement or a smaller number for faster scrolling.
Logo Size:
Adjust min-width: 11%; to make logos larger or smaller.
Scroll Distance:
The translateX(-225%) value controls how far the logos travel before looping. If you have more or fewer logos, you may need to edit this to keep the animation smooth.
Step 4: Make Sure It Looks Great on Mobile
The mobile section of the CSS automatically adjusts the logo size and scroll speed for smaller screens, but you can modify those values too if needed.
And That’s It!
You now have a sleek, automatic scrolling logo carousel that looks great on desktop and mobile. Perfect for showing off brand partners, clients, or press features!
Bonus Tip:
If you want the scroll to pause on hover, add this snippet at the bottom of your CSS:
.gallery-grid-wrapper:hover {
animation-play-state: paused;
}Got any questions or need my help?
HIRE ME TO BUILD OR EDIT YOUR WEBSITE 👩💻
Hourly Website Edits (2-hour sessions) Learn more →
Custom Web Design Learn more →
GET 10% OFF YOUR SQUARESPACE PLAN 💸
Use my affiliate link for 10% off your first year of Squarespace! Sign up here or use the code LUMINESCENT10
