The editor above is set to neon with a dark plate. Change the sign text, pick a tube color, and watch the glow pulse before you export.
How to use it in 3 steps
Write the sign
Type one to three words. Neon reads like a shop sign, so short and capitalized works best.
Choose tube and glow colors
Set the primary color for the tube and the secondary color for the glow around it. Similar hues look like real gas tube; far-apart hues look like a sticker.
Set a loop you can read
Keep 3 seconds at 24 fps to start, check the pulse, then export. Use WebM or MP4 for a soft glow.
Three tuning tips
Keep the bloom smaller than the gap between letters
When the glow radius grows past the spacing between letters, neighboring glows merge and the word turns into a blur. On a phone, where the frame is about 390 points wide, a bloom that looks elegant on a monitor swallows thin strokes. Prefer a heavier font such as Bungee or Anton over a thin one.
Pick tube color for the background you will use
On a dark plate, a saturated tube with a lighter core looks lit. On a transparent export, the glow has no dark surface to sit on, so it looks washed out over a light page. Make the text on a dark solid background unless you know the destination.
Match the pulse to the loop length
A pulse that completes a whole number of cycles in the loop has no seam. In a 3-second loop, one cycle per 3 seconds or three per 3 seconds both repeat cleanly, while a 2.2-second pulse jumps at the restart.
Frame math for a neon loop
A 3-second loop at 24 fps is N = round(3 × 24) = 72 frames. If the pulse completes one cycle in the loop, each frame advances the glow by 1/72 of a cycle, or 5 degrees of a sine wave (360 / 72). That is smooth enough that you do not need more frames: raising fps to 30 gives 90 frames at 4 degrees each, which is hard to see and adds 25 percent more data. Decimal megabytes are used here (1 MB = 1,000,000 bytes).
| 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 |
Neon is the style that suffers most from GIF's limits. A glow is a gradient of brightness from the tube out to the background, and 256 colors cannot hold many steps of every hue at once, so GIF shows rings around the text. On a transparent GIF it is worse: each pixel is either fully visible or fully gone, so the outer edge of the glow gets cut off. A dark solid plate avoids this. WebM with transparency, or MP4 on a dark plate, keeps the falloff smooth.
For a square 1080 × 1080 loop, the default video bitrate is 2,799,360 bits per second, and a 3-second MP4 is estimated at about 1.05 MB. Most of a neon frame is flat dark, which compresses well, so real files often come in smaller.
Sources
Common mistakes
A bloom so wide the letters wash out
If the glow brightness near the tube is close to the tube color, edges vanish. Cut the glow until each letter has a visible edge at phone size.
Exporting neon as a transparent GIF and posting it on white
Neon needs a dark surface. Use a solid dark background for GIF, or export WebM if you need transparency.
A pulse period that does not divide the loop
If the brightest moment is not the same at frame 0 and frame 71, the loop visibly jumps. Choose one or more whole pulses per loop.
Choosing a thin script font for a small sign
Pacifico at small sizes leaves little tube to light. Increase size or switch to Bungee, Anton, or Orbitron.
Frequently asked questions
What colors look most like real neon?
Saturated pink, cyan, and warm orange on a near-black plate. Use a lighter shade for the glow than for the tube so the center looks hot.
Why does my neon GIF have rings around the glow?
GIF has only 256 colors per frame, and a smooth glow needs more shades than that. Export MP4 or WebM for a smooth falloff, or reduce the bloom for GIF.
Can I make neon text with a transparent background?
Yes, in GIF (1-bit transparency, so edges can be hard) or WebM in browsers that record it. MP4 cannot carry transparency. Place it over a dark image so the glow has something to light.
Which font works best for neon?
Bungee and Orbitron have the thick, even strokes that suit tube lettering. Pacifico looks like a hand-bent tube but needs a larger size.
Is my text sent to a server?
No. The glow is drawn and encoded in your browser.
Is there a watermark?
No. Export is free with no watermark and no account.