CSS Marquee Generator
100% Free · Client-Side
Generate modern, highly performant CSS-only infinite scrolling marquees for text, logos, or cards. Customize direction, speed, gap, and fade edges with exportable HTML and CSS.
Scrolling...
HTML
<div class="marquee-container">
<!-- Group 1 -->
<div class="marquee-content">
<div class="marquee-item">Logo 1</div>
<div class="marquee-item">Logo 2</div>
<div class="marquee-item">Logo 3</div>
<div class="marquee-item">Logo 4</div>
<div class="marquee-item">Logo 5</div>
</div>
<!-- Group 2 (Duplicate for infinite loop) -->
<div class="marquee-content" aria-hidden="true">
<div class="marquee-item">Logo 1</div>
<div class="marquee-item">Logo 2</div>
<div class="marquee-item">Logo 3</div>
<div class="marquee-item">Logo 4</div>
<div class="marquee-item">Logo 5</div>
</div>
</div>CSS
:root {
--marquee-gap: 32px;
--marquee-duration: 20s;
}
.marquee-container {
display: flex;
overflow: hidden;
gap: var(--marquee-gap);
width: 100%;
mask-image: linear-gradient(to right, transparent, black 100px, black calc(100% - 100px), transparent);
}
.marquee-content {
display: flex;
flex-shrink: 0;
justify-content: space-around;
gap: var(--marquee-gap);
min-width: 100%;
animation: scroll var(--marquee-duration) linear infinite;
}
.marquee-container:hover .marquee-content {
animation-play-state: paused;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - var(--marquee-gap)));
}
}
/* Optional styling for items */
.marquee-item {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 150px;
height: 80px;
background: #f3f4f6;
border-radius: 8px;
}Marquee Settings
Configure your infinite scroll
20s
Higher is slower.
32px
Stops animation when user hovers.
Soft gradient masks on edges.
100px