Scrolling News Ticker Generator

Create a horizontal ticker for headlines, status messages, scores, release notes, or announcements. Add separate items instead of one long text string so links and labels remain structured.

Live preview

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Generated website component</title><style>body{margin:0;padding:20px;font:16px/1.6 system-ui;color:#172033}*{box-sizing:border-box}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}:root{--fg:#172033;--bg:#ffffff}.stg-box{padding:24px;border-radius:12px;border:1px solid #dbe3ee;background:var(--bg);color:var(--fg)}.stg-button{padding:10px 16px;border-radius:8px;border:1px solid #cbd5e1;background:#2563eb;color:#fff;text-decoration:none;display:inline-block}.stg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}.stg-muted{opacity:.8}.stg-card{padding:20px;border:1px solid #cbd5e1;border-radius:12px}.stg-controls{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.stg-image{max-width:100%;height:160px;object-fit:contain}button:focus-visible,a:focus-visible{outline:3px solid #2563eb;outline-offset:3px}.stg-ticker{display:flex;align-items:center;gap:20px}.stg-ticker-window{overflow:hidden;flex:1;container-type:inline-size}.stg-track{display:flex;gap:24px;white-space:nowrap;width:max-content;animation:stg-ticker 20s linear infinite}.stg-ticker:hover .stg-track,.stg-ticker:focus-within .stg-track{animation-play-state:paused}@keyframes stg-ticker{from{transform:translateX(100cqw)}to{transform:translateX(-100%)}}@media(prefers-reduced-motion:reduce){.stg-ticker-window{overflow:visible}.stg-ticker{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.stg-animated,.stg-animated *{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important;position:static!important;white-space:normal!important}.stg-message,.stg-track{width:auto!important;max-width:100%!important;overflow-wrap:anywhere!important}.stg-viewport{height:auto!important;overflow:visible!important}.stg-track{flex-wrap:wrap!important}.stg-duplicate{display:none!important}}</style></head><body><section class="stg-box stg-ticker" aria-label="News ticker"><strong>NEWS</strong><div class="stg-ticker-window"><div class="stg-track stg-animated"><a href="https://example.com/" rel="noopener noreferrer">New tools are available.</a><span aria-hidden="true">•</span><a href="https://example.com/" rel="noopener noreferrer">Explore the guides.</a></div></div><button class="stg-button stg-toggle" aria-pressed="false">Pause</button></section><script>document.querySelector('.stg-toggle').onclick=function(){const track=document.querySelector('.stg-track');const p=this.getAttribute('aria-pressed')!=='true';track.style.animationPlayState=p?'paused':'running';this.setAttribute('aria-pressed',String(p));this.textContent=p?'Resume':'Pause';}</script></body></html>

What this generator does

Multiple ticker items with optional URL.
Separator text/icon.
Left/right direction and duration.
Pause button, hover/focus pause and reduced-motion fallback.
Optional fixed label such as NEWS or UPDATE.

How to use

Add ticker items.
Add optional links and a short fixed label.
Choose direction, duration and separator.
Style the bar.
Test pause controls and copy the code.

Best practices

Keep headlines concise.
Do not make the only copy of important information move continuously.
Use a visible pause control when the ticker carries more than decorative content.

Frequently asked questions

Can each ticker item link somewhere different?

Yes. Every item can have its own optional URL.

Can I use it for stock prices?

You can present values, but this generator does not fetch live market data. You supply the displayed items.

Related tools & guides

Scrolling Text Generator

Create beautiful scrolling text animations with live preview. Choose from 8 animation types, customize speed, direction, fonts and colors, then copy clean HTML & CSS.

Free Marquee Text Generator

Create modern marquee text with CSS. Customize speed, direction, colors and animation style, preview it live, then copy clean HTML and CSS.

Notification / Toast Generator

Create an accessible notification toast for success, error, warning or information messages. Configure placement, duration and actions, then copy the code.