Effects · Beginner

Infinite Marquee Ticker

A smooth, seamless scrolling marquee with edge fade — modern, not the old <marquee> tag.

<div class="mq"><div class="mq-track"><span>★ FREE SNIPPETS</span><span>★ NO BUILD STEP</span><span>★ COPY &amp; PASTE</span><span>★ FREE SNIPPETS</span><span>★ NO BUILD STEP</span><span>★ COPY &amp; PASTE</span></div></div>

body{background:#0d1426}
.mq{width:420px;max-width:100%;overflow:hidden;background:linear-gradient(135deg,#ff7a18,#ff477e);border-radius:12px;padding:14px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-track{display:flex;gap:40px;white-space:nowrap;animation:mq 12s linear infinite;font:800 16px/1 system-ui,sans-serif;color:#fff}
.mq-track span{flex:none}
@keyframes mq{to{transform:translateX(-50%)}}

Free to use.This snippet is plain HTML, CSS and JavaScript with no dependencies. Copy any file, or download the whole thing as a single ready-to-open .html page.