News Ticker Generator

Why a news ticker still earns its place on a page

A news ticker is a narrow strip of scrolling text. Television newsrooms run the ticker along the lower third of the screen; websites display it above the navigation or under the hero image.

The free news ticker generator above builds that strip for you. You add a headline per line, pick a look, set direction and pace, and the live preview updates as you type. The result is an HTML ticker with the CSS animation embedded, ready to paste into your website; if HTML is not an option, you can use the GIF or MP4/WebM export instead. Nothing leaves your computer, the whole tool runs in your browser.

News tickers are used for far more than breaking headlines. Below are the seven uses we see most often, each with the settings that work for it.

1. A breaking news ticker for a blog or news site

This is the classic case: a red label reading BREAKING, followed by three to six headlines sliding from the right to the left. Click the preset of that name, keep the label switched on, and set the scrolling speed between 60 and 90 px/s. At that pace a reader catches a headline the first time it passes, and a horizontal news ticker still feels urgent.

A few details separate a ticker people read from one they ignore:

• Keep each headline under about 80 characters.
• Switch on pause on hover, so a reader can stop the ticker and finish a line. Some readers need that extra time.
• Set the width to the full content column (1200 px on most layouts) and the height to 48 px.
• Turn on fading edges so headlines dissolve at both ends instead of being cut off.

To add fresh news, edit the text inside the snippet. There is no script to configure, so the ticker also works on static pages. If you want a news ticker that pulls RSS feeds automatically, use the snippet as a template and have your CMS fill in the items; the generator itself stays offline by design.

2. Announcements and opening hours on a small business website

A bakery that closes early on Saturdays or a clinic with holiday hours: this kind of notice gets missed in a footer and looks shouty as a popup. A slow ticker in the Classic Bar preset handles it well, because the eye follows motion and the information stays in view.

Use one or two lines of text, a pace of 30 to 50 px/s, and a width that matches your content area, often 960 px. The snippet drops into any CMS that accepts raw HTML, such as a WordPress Custom HTML block. For a matching header graphic next to the ticker, the animated banner maker offers the same color and gradient options.

3. A stock ticker for prices, scores or statistics

The Stock Ticker preset colors each item green or red, the way trading floors display gains and losses. The generator does not fetch live stock prices; you type the values yourself, which is all most people need:

• a sports club showing last weekend’s results,
• a fundraiser displaying the current total next to the goal,
• an office display with this month’s figures.

Set the pace to 80 to 120 px/s. Short items such as “DAX +0.8%” are read at a glance, so stock prices can move faster than full sentences. A monospaced font keeps the numbers aligned while they scroll, and you can add more items at any time.

4. A lower-third overlay for live streams and videos

Streamers and video editors cannot paste HTML into OBS, so this is where the GIF and MP4/WebM export comes in. The generator renders a complete cycle of the ticker animation and cuts it at the end so the loop is seamless: play the file on repeat and the headlines never jump.

For a stream overlay, a width of 1200 and a height of 64 px fits a 1080p canvas at full width. For a looping clip of product photos on that stream, the slideshow maker exports to all three formats, and the GIF maker turns any image sequence into a loop.

5. An LED ticker for events, kiosks and signage

The LED Dot Matrix preset imitates the pixel grid of a hardware display. Set the font size to 28 or 32, the height to 96 px and the pace between 40 and 60 px/s so the text stays readable from across a room. Then open the saved HTML file full screen on any TV.

Because the snippet needs no JavaScript, it runs on locked-down kiosk browsers and keeps running offline. A conference can display session changes at the entrance, a school the day’s cancellations, and all of it with the first free ticker you create here.

6. A vertical news ticker in a sidebar

Horizontal scrolling text needs width. In a 320 px sidebar it feels cramped, so switch the direction to up or down instead. Headlines then rise through a window a single line high, a “latest posts” widget beside the content.

Vertical motion is harder to read than horizontal, so bring the scrolling speed down to 20 or 30 px/s and keep the height at 32 or 48 px. Because the result is plain HTML, you can wrap any headline in a link after copying the snippet.

7. A retro marquee without the deprecated tag

Many people arrive here searching for an HTML marquee generator. The old marquee element still scrolls text in most browsers, but MDN lists the marquee element as deprecated and advises against it in new projects, recommending CSS animations with transforms instead.

That is how this generator works. The snippet is a div with its overflow hidden, an inner div that holds your items twice, and a CSS keyframe animation that moves the inner div with a transform. The animation stays smooth because the browser hands it to the graphics card, and the CSS includes two features the old tag never had:

1. A reduced-motion fallback. Visitors who have asked their operating system for less motion see the headlines standing still.
2. ARIA attributes so a screen reader announces the text once as a region instead of following the movement.

For the look of a 1998 homepage, take the Minimal preset, a serif font and a bright gradient: all the nostalgia without the deprecated code.

Which settings fit which use?

How fast should a news ticker scroll?

The speed slider runs from 20 to 200 px/s. Above 120 px/s the text becomes a visual effect; nobody reads the information. At 60 px/s a 1200 px wide ticker displays a full-sentence headline for about twenty seconds. Read the preview out loud; if you cannot finish a line before it reaches the end of the bar, slow it down.

Font size follows that logic. The range of 12 to 32 covers everything from a compact sidebar to a wall display; leave at least 8 px above and below the letters. Change a value, click the preview, and judge the animation before you copy anything.

What else can you do with the code?

The snippet is plain HTML and CSS, so you can edit it like any other part of your website. Change the colors in the embedded CSS, add a link around a headline, or place the ticker inside an existing div on your page. Because there is no widget script to load, it does not slow the page down. Many people create a custom news ticker once, save it as a template, and reuse it with new text.

Ready to build your news ticker?

Scroll back up, paste your headlines, and click through two or three presets in the preview. Copy the HTML snippet into the page you need it on, or export a GIF or MP4 for your stream. You need no account and no upload, there is no charge, and the free news ticker code is yours to edit. The tools on this site are browser successors of the Amara Flash programs that lived on this domain from 2004 to 2016; the about page has the story.