Vertical Scrolling Text Generator

Create text that moves vertically through a masked viewport, suitable for credits, schedules, compact notices, and presentation panels. Unlike the general generator, this page is optimized for multi-line vertical content.

Live preview

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Generated website component</title><style>body{margin:0;padding:20px;font:16px/1.6 system-ui;color:#172033}*{box-sizing:border-box}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}.stg-container{position:relative;overflow:hidden;background:#ffffff;padding:10px;border:0px none #000000;border-radius:0px;text-align:left;margin:auto}.stg-viewport{position:relative;overflow:hidden;min-height:80px;height:260px;}.stg-message{position:relative;width:max-content;white-space:nowrap}.stg-viewport:focus-within .stg-message{animation-play-state:paused}.stg-pause{margin:8px;padding:8px 16px}.stg-paused *{animation-play-state:paused!important}.stg-block-0{container-type:normal;font-family:system-ui;font-size:16px;font-weight:400;letter-spacing:0px;color:#000000;background:#ffffff;line-height:1.6;white-space:pre-wrap;width:100%;animation:stg-block-0-motion 10s linear infinite both;}.stg-viewport:hover .stg-block-0,.stg-viewport:hover .stg-block-0 *{animation-play-state:paused}@keyframes stg-block-0-motion{from{transform:translateY(260px)}to{transform:translateY(-100%)}}.stg-container{container-type:inline-size}@media(prefers-reduced-motion:reduce){.stg-animated,.stg-animated *{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important;position:static!important;white-space:normal!important}.stg-message,.stg-track{width:auto!important;max-width:100%!important;overflow-wrap:anywhere!important}.stg-viewport{height:auto!important;overflow:visible!important}.stg-track{flex-wrap:wrap!important}.stg-duplicate{display:none!important}}
@media(prefers-reduced-motion:reduce){.stg-animated,.stg-animated *{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important;position:static!important;white-space:normal!important}.stg-message,.stg-track{width:auto!important;max-width:100%!important;overflow-wrap:anywhere!important}.stg-viewport{height:auto!important;overflow:visible!important}.stg-track{flex-wrap:wrap!important}.stg-duplicate{display:none!important}}</style></head><body><div class="stg-container"><div class="stg-viewport"><div class="stg-message stg-animated stg-block-0">Our team
Design &amp; development
Thank you for watching</div></div></div><button class="stg-pause" aria-pressed="false">Pause animation</button><script>document.querySelector('.stg-pause').addEventListener('click',function(){const paused=document.querySelector('.stg-container').classList.toggle('stg-paused');this.textContent=paused?'Resume animation':'Pause animation';this.setAttribute('aria-pressed',String(paused));});</script></body></html>

What this generator does

Multi-line editor.
Up or down direction.
Viewport height, line-height, edge fade and duration.
Loop or one-pass modes.
Pause and reduced-motion behavior.

How to use

Paste multi-line content.
Choose Up for credits or Down for reverse motion.
Set viewport height and duration.
Tune typography and edge fade.
Preview and copy the code.

Best practices

Use generous line-height.
For long credits, prefer one readable pass or a long loop duration.
Provide a static fallback for reduced motion.

Frequently asked questions

Can I make movie-style credits?

Yes. Use Up direction, multi-line centered text, a tall viewport and a long one-pass duration.

Can the text loop continuously?

Yes. Choose Loop mode.

Related tools & guides

How to Create Vertical Scrolling Credits with CSS

Create readable upward-scrolling credits using a clipped viewport, translateY animation, sensible duration and a static reduced-motion fallback.

Scrolling Text Generator

Create beautiful scrolling text animations with live preview. Choose from 8 animation types, customize speed, direction, fonts and colors, then copy clean HTML & CSS.

GIF Scrolling Text Generator

Create an animated GIF with scrolling text. Set text, size, colors, direction, speed and canvas dimensions, preview it, then download the GIF.