The editor above is set to fire. Change the words, pick two heat colors, and watch the flames lick above the letters.
How to use it in 3 steps
Type a short, heavy phrase
Two or three words in capitals. Flames need room above the letters, so keep the line short enough to leave space at the top.
Choose heat colors
Set a bright core color (yellow or orange) and an outer color (red or deep orange). Keep them on one warm line.
Check the edges, then export
Make sure the flames fit inside the frame. Use MP4 or WebM for the smoothest fade, or GIF with a dark background.
Three tuning tips
Keep flicker amplitude small
Flame height that jumps by more than about a fifth of the letter height looks like a stuttering animation instead of fire. Gentle variation across frames reads as heat, and it compresses better.
Choose a palette that survives 256 colors
A GIF frame can only hold 256 colors. A flame with a long red-to-yellow ramp uses most of them, leaving banding. Two or three well-separated warm hues, on a near-black plate, keep the gradient steps from collapsing.
Pad the canvas so flames are not clipped
Flames extend above and beside the letters. If the text fills the frame, the flames cut off at the edge. Reduce the font size so there is a clear margin of roughly a quarter of the letter height on top.
Frame math for a fire loop
A 3-second loop at 24 fps gives N = round(3 × 24) = 72 frames. Fire has no strict period, so the loop works by making frame 71 flow into frame 0. Each frame's flicker value comes from motion that repeats once over the loop, which is why the flame at the start and end match. Decimal megabytes (1 MB = 1,000,000 bytes) are used here.
| Canvas | 1080 × 1080 px (1,166,400 pixels per frame) |
|---|---|
| Frames | N = 3 s × 24 fps = 72 |
| Raw frames before encoding | 72 × 1080 × 1080 × 4 bytes = 336 MB |
| MP4 / WebM upper estimate | 2.8 Mbps × 3 s ÷ 8 = 1.0 MB |
| GIF frame delay | 1/24 s is 4.17 centiseconds; GIF stores whole centiseconds, so delays alternate (4 and 5 cs) to average out |
Fire is a hard case for GIF. The flame edge is a gradient from opaque orange to transparent. With a transparent GIF, each pixel is either on or off, so the soft tips become jagged and pick up a colored fringe from whatever matte the encoder used. A solid dark background avoids the fringe because every pixel can be a real color. The 256-color palette is also shared by the whole frame, so use few hues.
Raw size for 1080 × 1080 at 72 frames is 72 × 4,665,600 = about 335.9 MB. As video at the default 2,799,360 bits per second, 3 seconds is about 1.05 MB. Flames change every frame, so the encoder will not find the savings a typewriter loop does. Expect the estimate to be closer to reality here.
Sources
Common mistakes
Flames clipped at the top edge
If the text is too large, the flame tips are cut off. Shrink the font or use a taller canvas.
A transparent GIF with fringed edges
Soft flame tips cannot be half-transparent in GIF. Use a dark solid plate or switch to WebM.
Too many heat colors
A rainbow of oranges spends the 256-color budget and bands. Use two or three.
Wild flicker
Fast, large changes read as noise and hurt file size.
Frequently asked questions
Why do my flames look jagged in GIF?
GIF supports only on-or-off transparency and 256 colors per frame. Use a solid dark background, or export MP4 or WebM.
What colors make good fire?
A yellow or orange core with a red outer edge, over near-black.
Which font suits fire text?
Anton and Bungee have thick strokes that stay legible with flames behind and above them.
How do I stop the flames from being cut off?
Lower the size or pick a taller canvas so there is clear space above the text.
Is the loop seamless?
The flicker is built to repeat once per loop, so the last frame flows into the first.
Does it cost anything or add a watermark?
No. It is free, with no watermark and no account.