Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
Scrolling Logo Cloud
Responsive · Animated
Animated Stats Counters
Responsive · Animated
Stats With Logos (Dark)
Responsive · Animated
Testimonial Wall
Responsive · Animated
Testimonial Carousel
Responsive · Animated
Testimonial Marquee
Responsive · AnimatedScrolling Logo Cloud — Free Website Section Template
Stats & logos · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue
What's included
Features
About this section
Scrolling Logo Cloud — Free Trusted By Logo Strip Template
Scrolling Logo Cloud is the "Trusted by" strip you see under almost every SaaS hero: a short line of text above a row of customer logos that scrolls endlessly, with soft fades at both edges. Hovering slows it to a stop, and logos change from grey to full colour on hover.
Looks finished before you have logos
Every logo starts as a clean wordmark (one of 60 icons plus the company name in your heading font), so the section looks right while you collect real logos. Upload an SVG or transparent PNG for any company and it replaces the wordmark automatically.
Seamless and respectful
The strip loops with GSAP without jumps, duplicate logos are hidden from screen readers, and visitors who prefer reduced motion get a still row they can scroll by hand. Up to sixteen logos fit in the loop.
Edit and theme
Write your own line above the logos (wrap the number in *asterisks* to highlight it) and reorder logos to put your best-known customers first. Colours come from the shared theme, so it sits naturally under any hero in the library.
Export it
Download HTML or a ZIP with your logo files, copy a React or Vue component, or fork into My Code. For a static logo row with numbers, see Stats With Logos.
Why use it
Why Use the Scrolling Logo Cloud
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the text and logos in the panel. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
Only with permission. Many companies allow logo use for customers, but check your contracts or ask; until then, the built-in wordmarks keep the section looking finished.
SVG or transparent PNG files of the one-colour logo, about 30 px tall when displayed. The section shows them in grey and in full colour on hover.
Visitors can hover or focus the strip to stop it. People who prefer reduced motion get a still row. In exported code you can also change the data-speed value.
Between three and sixteen. Eight to twelve gives the smoothest-looking loop.
It saves an editable copy of your Scrolling Logo Cloud in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.
Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.