Scrolling Text Generator

Free News Ticker Generator

Build a professional scrolling news ticker for your website. Configure speed, direction, and styling with a live preview, then export clean HTML & CSS code ready to embed anywhere.

Live Preview
Welcome to Scrolling Text Generator!
Generated Code
<style>
.stg-container {
  overflow: hidden;
  background: #ffffff;
  padding: 10px;
  border-radius: 0px;
  
  
}

@keyframes stg-b0-scroll { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

.stg-block-0 {
  overflow: hidden;
  background: transparent;
}
.stg-block-0 .stg-text {
  color: #000000;
  font-size: 16px;
  
  animation: stg-b0-scroll 10s linear infinite;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.stg-block-0 .stg-text:hover { animation-play-state: paused; }
</style>

<div class="stg-container">
  <div class="stg-block-0">
    <div class="stg-text">Welcome to Scrolling Text Generator!</div>
  </div>
</div>

Container Settings

Text Block

Supports HTML: <b>, <i>, <a href="...">, <span style="...">

What Is a News Ticker?

A news ticker — sometimes called a ticker tape or crawl — is a narrow bar of continuously scrolling text. You have seen them on CNN, Bloomberg, and sports networks. On the web, news tickers are used to display breaking news, stock prices, event updates, and promotional messages without interrupting the rest of the page layout.

How to Create a News Ticker

  1. Enter your headlines or messages in the text editor above.
  2. Select a scroll direction (left-to-right is the classic ticker style) and set the speed.
  3. Customize the background color, text color, font size, and padding to fit your site design.
  4. Watch the live preview update as you adjust settings.
  5. Copy the generated code and paste it into your website's header, footer, or any section.

Why Use Our News Ticker Generator?

  • Broadcast-quality look — create tickers that mirror major news networks.
  • Pure CSS animation — no JavaScript dependencies; runs smoothly on every device.
  • Multiple text blocks — chain several messages together in a single ticker strip.
  • Instant preview — tweak the design in real time before copying the code.
  • Completely free — no account required, no watermarks, unlimited use.

Frequently Asked Questions

What is a news ticker?
A news ticker is a horizontal bar of scrolling text commonly seen on news websites, TV broadcasts, and live dashboards. It continuously displays headlines, updates, or short messages that slide across the screen, keeping visitors informed without taking up much space.
How do I add a news ticker to my website?
Use our generator to configure your ticker text, animation speed, and visual style. Once you are happy with the preview, copy the generated HTML and CSS code and paste it into your website's HTML — typically near the top of your page or inside a header section.
Can I display multiple messages in one ticker?
Yes. You can add multiple text blocks in the editor and they will scroll together in sequence. Each block can have its own styling, so you can highlight breaking news in red while keeping regular updates in a neutral color.
Will the news ticker slow down my website?
No. The ticker is powered by lightweight CSS animations — there is no JavaScript runtime overhead. CSS animations are hardware-accelerated by the browser, so the effect runs smoothly even on mobile devices.