Scrolling Text Generator

Free Announcement Bar Generator

Create a scrolling announcement bar to highlight promotions, news, or important updates at the top of your website. Customize the design with a live preview and export ready-to-use HTML & CSS.

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 an Announcement Bar?

An announcement bar (also known as a promo bar, notification bar, or top bar) is a slim banner that sits at the top of a webpage. It is one of the most effective ways to communicate time-sensitive information — flash sales, coupon codes, new product launches, or maintenance windows — because it is the first thing visitors see when the page loads. Adding a scrolling animation makes the bar even harder to miss.

How to Create an Announcement Bar

  1. Type your announcement message in the editor above — for example, "Free shipping on orders over $50!"
  2. Pick an animation style. A smooth left-to-right scroll works great for longer messages; a fade or bounce is ideal for short phrases.
  3. Set the bar's background color, text color, and font to match your brand identity.
  4. Review the live preview, adjust speed and spacing as needed.
  5. Copy the HTML & CSS code and paste it at the top of your website template, theme file, or page builder.

Why Use Our Announcement Bar Generator?

  • Boost conversions — a prominent announcement bar draws attention to offers and drives clicks.
  • Lightweight code — pure HTML & CSS with no JavaScript; zero impact on page load speed.
  • Works everywhere — compatible with Shopify, WordPress, Wix, Squarespace, custom HTML, and any platform that lets you paste code.
  • Full customization — control colors, fonts, animation speed, direction, and spacing from one visual editor.
  • Always free — no registration, no watermarks, no usage limits.

Frequently Asked Questions

What is an announcement bar?
An announcement bar is a thin, horizontal banner — typically placed at the very top of a website — that displays an important message such as a sale, free shipping offer, product launch, or scheduled maintenance notice. Adding a scrolling animation makes it more eye-catching.
Where should I place the announcement bar on my page?
The most common placement is above the navigation header, spanning the full width of the page. This ensures every visitor sees the message immediately. You can paste the generated code as the first element inside your page's <body> tag or header component.
Can I match the announcement bar to my brand colors?
Absolutely. The editor lets you set the background color, text color, font family, font size, and padding. You can also use a gradient background or add an emoji or icon character to make the bar stand out.
Is the generated code responsive and mobile-friendly?
Yes. The output uses percentage-based widths and CSS animations that adapt to any screen size. The text scrolls smoothly on desktop, tablet, and mobile browsers without extra configuration.