CSS-Zone

News ticker

Breaking news style horizontal scroll. Practical example for marquee lines and continuous content rails with live preview, HTML structure, and production-ready CSS you can integrate quickly.

← Back to Home

Preview

BREAKING
Latest updates from the world of web developmentLatest updates from the world of web development

HTML + CSS

<div class="news-scroll">
  <span class="news-scroll__label">BREAKING</span>
  <div class="news-scroll__content">
    <span>Latest updates from the world of web development</span>
    <span>Latest updates from the world of web development</span>
  </div>
</div>

<style>
.news-scroll {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.24);
  overflow: hidden;
  max-width: 350px;
}

.news-scroll__label {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.news-scroll__content {
  display: flex;
  gap: 32px;
  animation: newsSlide 12s linear infinite;
}

.news-scroll__content span {
  white-space: nowrap;
  font-size: 14px;
  color: rgba(226, 232, 240, 0.9);
}

@keyframes newsSlide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
</style>

What the News ticker pattern demonstrates

News ticker is a reusable CSS animation pattern that can be integrated into modern UI without external dependencies. The example includes HTML structure and motion styles that are easy to scale for production components.

When this animation pattern is a good fit

Use this effect for state indication, visual focus, or lightweight micro-interactions that support content clarity. Motion should reinforce hierarchy, so keep speed, contrast, and density aligned with your interface goals.

How to implement it in production safely

Copy the snippet, adapt spacing and timing to your system tokens, and test behavior on mobile and low-power devices. Add reduced-motion support to keep the component accessible while preserving the same functional meaning.

Related animation examples

Running lineVertical scroll