Free Section
Infinite Logo Ticker Marquee
An infinite looping customer and partner brand logo marquee with edge gradient fade masks and pause-on-hover.
Colours in this gradient
#090d16#64748b#ffffff#3b82f6
background: ;The code
Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<section class="marquee-sec">
<div class="marquee-intro">
<span>Trusted by engineering teams worldwide</span>
</div>
<div class="marquee-container">
<div class="marquee-track">
<div class="logo-item">ā¦ ACME Corp</div>
<div class="logo-item">ā² Vercel</div>
<div class="logo-item">ā Supabase</div>
<div class="logo-item">ā” Stripe</div>
<div class="logo-item">ā Raycast</div>
<div class="logo-item">ā Linear</div>
<div class="logo-item">ā Cloudflare</div>
<div class="logo-item">ā
Datadog</div>
<!-- Duplicate for seamless infinite loop -->
<div class="logo-item">ā¦ ACME Corp</div>
<div class="logo-item">ā² Vercel</div>
<div class="logo-item">ā Supabase</div>
<div class="logo-item">ā” Stripe</div>
<div class="logo-item">ā Raycast</div>
<div class="logo-item">ā Linear</div>
<div class="logo-item">ā Cloudflare</div>
<div class="logo-item">ā
Datadog</div>
</div>
</div>
</section>The AI prompt
Paste this into an AI coding tool to generate the same section, then ask it to adapt the colours, text or framework to your project.
Create an infinite looping partner logo ticker marquee in HTML and CSS. Requirements: - Seamless infinite horizontal scroll using CSS keyframes translateX(0) to translateX(-50%). - Duplicated item list so the transition has zero visible seam or hitch. - Edge mask gradient using mask-image: linear-gradient() to fade out left and right edges smoothly. - Pause scroll animation when the user hovers over the container. - Respect prefers-reduced-motion by wrapping items statically. Return one HTML file with a <style> block.
How to build it, step by step
- 1
Duplicate the logo list once inside a flex container with width: max-content.
- 2
Animate the track from translateX(0) to translateX(-50%) infinitely.
- 3
Apply linear-gradient mask-image on container to fade out edges.
Customisation tips
- Set animation-play-state: paused on container hover for interactive pause.
- Keep speed around 20-30 seconds so company logos remain legible.