Text Animation Generator

The 4-part recipe for animated text that works

Most animated text fails for a boring reason: someone picked the motion first and the message second. Our text animation generator works the other way round. You type your text, pick one of 12 text effects, tune the timing and export your animated text as a GIF, a video or a CSS snippet for your website.

To create a good result faster, run your project through four questions in order:

1. Message: what should the viewer read, and in how many words?
2. Effect: which motion supports that message instead of hiding it?
3. Timing: how fast, how long, and does it loop or stop?
4. Format: where will the text animation live, in a social media post, an email, a slide or on a web page?

Step 1: Create a message people can read while it moves

Animated text gives the reader less time than static text. Keep it to a headline, a short claim or a call to action. The text field takes up to 3 lines and 140 characters, and Enter starts a new line.

The layout takes care of itself. Your text wraps on its own, and when you type a line that is too wide for the canvas, the tool shrinks it until it fits and shows the new pixel value. A few habits make your text easier to read:

• Put the key word on its own line so it lands as a separate beat.
• Break lines where you would pause when reading aloud.
• Cut filler words. Each extra word adds stagger time to letter and word animations.

Step 2: Choose an effect that fits the purpose

The 12 presets work like animated text templates: each one sets a curated look with font, weight, text and accent colors and background. Everything stays editable, so you can adjust the visual style and keep the motion. There is nothing to unlock and no library of text templates to dig through.

Five of the animations use an extra accent: the typewriter cursor, the glitch split, the neon glow, the end of the gradient shine and the marker band. The accent picker only shows up when the selected effect uses one.

For typography there are five styles: Sans-serif, Serif, Condensed, Rounded and Monospace. Set the weight between 400 and 900 and the text size between 16 and 480 px, then align left, center or right. These are system font stacks, so the same text element looks slightly different across Windows, macOS and Android. The exported CSS snippet uses the same stacks, so it needs no extra web font on your site.

Step 3: Set speed, duration and loop

Three controls handle timing:

• Speed between 0.5× and 2.0× changes how quickly letters or words enter.
• Duration between 2 and 12 seconds sets the length of one cycle.
• Playback is either Loop or Play once, then hold. Hold leaves the final text on screen, which is the safer choice next to other content on a web page.

The live preview plays every change right away. Use play/pause to stop on a frame and Replay to watch the entrance again from the start. Leave some still time after the entrance so people can read the finished line, and lengthen the duration before you speed anything up.

There is also an accessibility reason to keep loops short or to stop them. Constant movement makes some users dizzy, and operating systems let them switch animations off. The prefers-reduced-motion media feature documented on MDN detects exactly that setting. The tool respects it in the preview, and the CSS code uses it too.

Step 4: Pick the canvas and file format for your platforms

Match the canvas to the place where people will see your text animation:

• 1:1 at 1080 × 1080 for feed posts
• 16:9 at 1920 × 1080 for your videos and presentation slides
• 9:16 at 1080 × 1920 for stories, reels and other vertical videos
• Banner at 1200 × 300 for headers and newsletter tops
• Custom with any width and height from 64 to 3840 px

The background can be solid, a two-color gradient or transparent. Then decide how to save your animated text:

MP4 uses your browser’s built-in encoder, which Chrome, Edge and Safari 16.4+ provide. WebM works in every modern browser.

What you get with the CSS code

For 11 of the 12 effects you can also export pure HTML and CSS without JavaScript, using nothing but the code in the box. Glitch is the exception, because its RGB split needs canvas rendering, so you can use it as GIF, MP4 or WebM only. Copy the snippet into your page or download it as a ready HTML file.

The font size uses clamp(), so the headline scales with the screen. When a visitor has reduced motion turned on, the animation stops and the text stays readable. Effects that split text into single letters put an aria-label with the full text on the wrapper element and hide the letter spans from screen readers, so a screen reader announces the words once. The guide on how to add an animation to a website shows where to paste it.

A free text animation tool that runs in your browser

Everything happens on your device. There is no upload and no account, and you can create as much animated text as you like for free.

This animated text generator handles one headline. If you need an ad in standard banner sizes with multiple scenes in a row, our Banner Maker is the better fit. To animate images or a clip instead of text and turn them into a GIF, open the GIF Maker.

Checklist before you download

• [ ] The message fits in 3 lines and reads at a glance.
• [ ] The effect matches the purpose, not just the mood of the day.
• [ ] Font, weight and colors fit your brand and the rest of your content.
• [ ] Speed and duration leave the final text on screen long enough to read.
• [ ] On a web page: Play once, then hold, unless a loop is really needed.
• [ ] The canvas matches the destination: 1:1, 16:9, 9:16, banner or custom.
• [ ] The format fits the channel: GIF for email, MP4 or WebM for video, CSS for your site.
• [ ] Transparent GIF: edge color set to your page background.
• [ ] Glitch chosen? Save it as GIF or video, since it has no CSS version.