Animated Text GIF Maker

How to make an animated text GIF

1. Type your text. Up to three lines, 40 characters each. Press Enter for a new line.
2. Pick a font and an animation. The preview redraws a moment after every change and loops with the real timing.
3. Choose the colors and the outline. A dark outline around light letters keeps them readable on any background.
4. Keep the background transparent, or switch to a solid color. With transparent, set the edge matte to the color your GIF will sit on.
5. Press Make GIF and download it. On a phone, Share sends it straight to an app.

Text size is automatic: the largest size, up to 96 px, at which your longest line fits the width you picked. Short words come out big. A long sentence comes out smaller, so split it over two lines if you want it bigger.

The six animations

Typing adds one character every 0.1 s, then holds the full text for 1.5 s. It suits a whole sentence better than any of the others.

Fade in brings the text up from nothing over a second, then holds it. On a transparent background it fades in from the matte color, because a GIF pixel can’t be half see-through. On a matching background that looks like a true fade.

Bounce hops the whole text up by a fifth of the font size and back down, about 1.4 times a second. Good for one loud word.

Wave sends a ripple through the letters, each one a little behind its neighbor. It needs a few letters to read as a wave; on a single character it just bobs.

Blink is two frames: half a second on, 0.3 s off. Tiny files. Our GAME OVER example below is 3 KB.

Rainbow gives every letter its own color and walks the whole spectrum along the text each loop. The text color picker hides here, since the letters choose their own. The outline still applies.

Speed scales every timing at once: Slow is 1.5 times longer, Fast about two thirds. The shortest frame is never under 0.02 s, because browsers slow down GIF frames set any faster.

Transparent backgrounds and the matte color

Here’s the catch nobody mentions. A GIF pixel is either fully transparent or fully solid. Letters on a screen have soft edges, though: a few pixels of half-blended color that make curves look smooth. Something has to happen to them.

We keep the edge pixels that are at least half covered and blend them with the matte color. Everything fainter goes fully transparent. If the matte matches the background the GIF lands on, the edges look as smooth as normal text. If it doesn’t, you get a thin halo, like the white rim you’d see if our examples below sat on a dark page.

So the rule is simple: White matte for white pages and light-mode chats, Dark for Discord and other dark themes, Black for pure black. Or pick a solid background and skip the question entirely.

One more thing: your text and outline colors come out exactly as picked. The rest of the palette is built around them, so a brand yellow stays that yellow instead of drifting to the nearest of 256 colors.

Examples

One GIF per animation, all made with this page at 320 px wide.