Logo cloud

로고 클라우드

A row of customer or partner logos that signals "this is already trusted" at a glance.

Also known as: Trust barSocial proof logosAs-seen-in strip
···
html
<div class="cloud">
  <p class="label">Trusted by teams at</p>
  <div class="marquee"><div class="track" id="track"></div></div>
</div>
css
.cloud{position:absolute;inset:0;padding:0 3%;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(8px,2vmin,14px);align-items:center}
.label{margin:0;font-size:clamp(8px,1.4vmin,11px);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.marquee{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:clamp(16px,4vmin,34px);width:max-content;animation:scroll 16s linear infinite}
.chip{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:clamp(9px,1.8vmin,14px);
  font-weight:700;color:var(--fg);opacity:.7}
.mark{width:clamp(10px,2.4vmin,18px);height:clamp(10px,2.4vmin,18px);flex:none}
@keyframes scroll{to{transform:translateX(-50%)}}
js
const NAMES = ['Novex', 'Arclight', 'Quorra', 'Halcyon', 'Fenwick', 'Modu'];
const RADII = ['50%', '8px', '50% 50% 0 50%', '0', '8px 0 8px 0', '50%'];
const ACCENTS = ['var(--accent)', 'var(--accent-2)', 'var(--accent-3)'];
const track = document.getElementById('track');
function group() {
  const g = document.createElement('div');
  g.style.cssText = 'display:flex;gap:inherit';
  NAMES.forEach(function (n, i) {
    const chip = document.createElement('span');
    chip.className = 'chip';
    const mark = document.createElement('i');
    mark.className = 'mark';
    mark.style.background = ACCENTS[i % ACCENTS.length];
    mark.style.borderRadius = RADII[i % RADII.length];
    chip.appendChild(mark);
    chip.append(n);
    g.appendChild(chip);
  });
  return g;
}
track.appendChild(group());
track.appendChild(group());

A narrow strip placed right under the hero, or between sections, that pairs a line like "000 teams already use this" with a row of customer, partner, or press logos — social proof delivered in under a second.

Tone-matching the logos matters most: full-color marks side by side look noisy, so most sites desaturate them to grayscale and only restore color on hover. When there are more logos than fit the viewport, an infinite marquee is the common fix.

Fewer than about six logos can look worse than none — either loop them in a marquee or drop the section. And logos are trademarks: never include a real company's mark without permission, even for reference-quality mockups.

When to use

Use once you actually have customers or partners to show. Faking logos as an early-stage startup backfires — swap in a user count or testimonials instead.