SCROLLING TEXT GENERATOR

Make your words move.

Create a scrolling banner. Customize it live. Export it in a click.

Free to create. No sign-up.

Live preview

Scroll left / 10s cycle

Ready to put it out there?

Copy the embed code or download your banner.

HTML + CSS • No dependencies • No watermark

View generated codeHTML / CSS

Paste into an HTML block on your website. The downloaded file also works on its own.

<!-- Scrolling Text Generator -->
<style>
.stg-banner{position:relative;overflow:hidden;isolation:isolate;width:100%;height:360px;background:#152B24;color:#D4FF94;box-sizing:border-box}.stg-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;width:max-content;max-width:none;white-space:pre;font-family:Arial, Helvetica, sans-serif;font-size:64px;font-weight:700;font-style:normal;letter-spacing:0px;line-height:1.3;animation:stg-left 10s linear infinite both;animation-delay:-3.5s;animation-play-state:running}@keyframes stg-left{from{left:100%;transform:translate(0,-50%)}to{left:0;transform:translate(-100%,-50%)}}@media(prefers-reduced-motion:reduce){.stg-banner:not([data-motion="enabled"]) .stg-text{animation:none;left:50%;top:50%;transform:translate(-50%,-50%);white-space:pre-wrap;width:90%;text-align:center;overflow-wrap:anywhere}}
</style>
<div class="stg-banner" role="img" aria-label="GOOD THINGS KEEP MOVING.">
  <span class="stg-text" aria-hidden="true">GOOD THINGS KEEP MOVING.</span>
</div>

FROM IDEA TO ANIMATION

Three steps. Endless motion.

Write your message

Add a headline, announcement, or a few words worth repeating.

Find your rhythm

Choose an animation. Tune the timing, type, and colors in the live preview.

Take it with you

Embed it on your website or download an HTML file to open in a browser.