Free Section

Infinite Logo Cloud Marquee

A dual-row infinite logo marquee with edge fade masks, trust badge, and hover pause. Built with CSS keyframe animation and SVG logos, zero dependencies.

dark
logos
social proof
marquee
animation
hero

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-section">
  <div class="marquee-header">
    <span class="badge">Trusted by Industry Leaders</span>
    <h2>Powering engineering teams worldwide</h2>
  </div>

  <div class="marquee-container" aria-label="Customer logos">
    <div class="marquee-track row-left">
      <div class="logo-group">
        <div class="logo-item"><span class="logo-icon">&#9670;</span><b>VERCEL</b></div>
        <div class="logo-item"><span class="logo-icon">&#9632;</span><b>STRIPE</b></div>
        <div class="logo-item"><span class="logo-icon">&#9650;</span><b>SUPABASE</b></div>
        <div class="logo-item"><span class="logo-icon">&#9679;</span><b>GITHUB</b></div>
        <div class="logo-item"><span class="logo-icon">&#9733;</span><b>LINEAR</b></div>
        <div class="logo-item"><span class="logo-icon">&#9878;</span><b>DATADOG</b></div>
      </div>
      <div class="logo-group" aria-hidden="true">
        <div class="logo-item"><span class="logo-icon">&#9670;</span><b>VERCEL</b></div>
        <div class="logo-item"><span class="logo-icon">&#9632;</span><b>STRIPE</b></div>
        <div class="logo-item"><span class="logo-icon">&#9650;</span><b>SUPABASE</b></div>
        <div class="logo-item"><span class="logo-icon">&#9679;</span><b>GITHUB</b></div>
        <div class="logo-item"><span class="logo-icon">&#9733;</span><b>LINEAR</b></div>
        <div class="logo-item"><span class="logo-icon">&#9878;</span><b>DATADOG</b></div>
      </div>
    </div>

    <div class="marquee-track row-right">
      <div class="logo-group">
        <div class="logo-item"><span class="logo-icon">&#9881;</span><b>POSTHOG</b></div>
        <div class="logo-item"><span class="logo-icon">&#10070;</span><b>RESEND</b></div>
        <div class="logo-item"><span class="logo-icon">&#9673;</span><b>CLOUDFLARE</b></div>
        <div class="logo-item"><span class="logo-icon">&#9660;</span><b>AWS</b></div>
        <div class="logo-item"><span class="logo-icon">&#9633;</span><b>RENDER</b></div>
        <div class="logo-item"><span class="logo-icon">&#10022;</span><b>PRISMA</b></div>
      </div>
      <div class="logo-group" aria-hidden="true">
        <div class="logo-item"><span class="logo-icon">&#9881;</span><b>POSTHOG</b></div>
        <div class="logo-item"><span class="logo-icon">&#10070;</span><b>RESEND</b></div>
        <div class="logo-item"><span class="logo-icon">&#9673;</span><b>CLOUDFLARE</b></div>
        <div class="logo-item"><span class="logo-icon">&#9660;</span><b>AWS</b></div>
        <div class="logo-item"><span class="logo-icon">&#9633;</span><b>RENDER</b></div>
        <div class="logo-item"><span class="logo-icon">&#10022;</span><b>PRISMA</b></div>
      </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.

Works with Claude · ChatGPT · Cursor · v0 · Bolt · Gemini

Create a dual-row infinite logo cloud marquee with edge fade masks in plain HTML and CSS.

Requirements:
- Centered header with a pill badge "Trusted by Industry Leaders" and a strong headline.
- Two horizontal rows of logo cards: top row scrolls left, bottom row scrolls right.
- Both rows duplicate their items with aria-hidden="true" on the clone to ensure an endless loop without jumps.
- Gradient fade masks on left and right edges (mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent)) so cards dissolve smoothly into the margins.
- Pause the animation on hover.
- Full responsive support and prefers-reduced-motion fallback where cards wrap statically.

Return one HTML file with a <style> block.

How to build it, step by step

1
Duplicate the logo set inside a flex container so that translating by -50% lines up seamlessly with the start.
2
Animate translateX from 0 to -50% for leftward scrolling, and from -50% to 0 for rightward scrolling.
3
Add a CSS linear-gradient mask-image on the parent container to create soft edge vignettes without extra HTML overlays.
4
Use animation-play-state: paused on hover so visitors can inspect logos.
5
Mark cloned duplicate elements with aria-hidden='true' to prevent redundant screen reader announcements.

Customisation tips

Adjust marquee speed by tweaking duration (e.g., 20s to 35s).
Using CSS mask-image avoids placing opaque png overlays, keeping transparency intact over gradients.
Replace text brands with monochrome SVG logos matching your real partners.