Neon Text Generator

Type some text and get a neon sign, as a PNG and as CSS

The neon text generator shows your text as a neon sign hanging on a wall. Type a text, pick a tube color and a font, and the sign on the stage changes at once. Turn on the border tube and a rectangular tube in a second color glows around the text. The power button switches the sign off, so you can also see it the way a sign looks by day, with only the color of the glass tube left.

You can take the finished sign away in two ways. Save PNG makes an image with the wall included, or an image of the glow alone on a transparent background. Copy code gives you CSS you can paste straight onto a web page heading. The glow in the CSS is seven text shadows in em units, so it scales with the font size, and the PNG redraws the same shadows on a canvas so it carries the same glow as the preview.

When to use it

• Before you settle on the wording of a sign: see line breaks, fonts and two tube colors together on a dark wall first. Switch the power off to check how it looks unlit by day.
• Glowing titles for thumbnails and videos: leave the wall clear and save at 1920×1080, and you get glowing letters you can drop straight into a video editor.
• A neon heading on a web page: copy the code and paste it. Because the shadows are in em units, the glow keeps its proportions when you change the heading size.
• Invitations, posters and profile pictures: put a birthday message or a shop name on a 1080×1080 square, glowing.

How to make a sign

1. Text: type up to 3 lines, 24 characters per line. Press a sample sign and the text, color and font all change together.
2. Font: Neon tube is a geometric sans-serif made for signs, and Neon script is a joined neon handwriting. Both cover Latin letters and numbers, including accents; other scripts appear in the device font.
3. Tube color: press one of the eight tube colors or choose your own on the color wheel. The border tube can be switched on separately and given a different color.
4. Glow, flicker and wall: glow runs from 1 to 10, flicker is None, Occasional or Broken sign, and the wall is Brick, Concrete, Dark or Clear.
5. Save: choose a PNG size and press Save PNG, or take the CSS with Copy code. Copy link puts the current settings after the # in the address so they open again exactly as they are.

The neon glow is built from seven shadows

The CSS text-shadow property can lay several blurred copies of the letter shapes under the text. CSS Text Decoration 3 says the shadow values are interpreted like box-shadow and that the first shadow is on top, and CSS Backgrounds 3 says the blur should be close to a Gaussian blur whose standard deviation is half the blur radius. This tool puts two narrow white shadows on top and five wider colored shadows underneath, which makes a tube that burns white in the middle and spreads color outward. The letters themselves are painted in the tube color mixed with 78% white.

An em is the font size of the element itself. That is why the same code on a 32px heading or a 120px heading gives a glow whose thickness follows the letters. If you fix the shadows in px, the glow gets relatively thin when you enlarge the text and swallows the letters when you shrink it.

When you change the glow setting, the radii of the five color layers are multiplied by glow ÷ 5, while the two white core layers change less, by 0.6 + 0.4 × (glow ÷ 5). The glow profile graph on the workspace shows how much light is left as you move away from the stroke center, for one stroke 0.1em thick with the seven layers stacked.

Shadows do not affect layout (CSS Text Decoration 3), so you have to leave space around the heading for as far as the glow reaches. A 64px heading at glow 5 lets the glow bleed a little over 50px above and below.

The PNG redraws the same glow on a canvas

The HTML standard defines the blur of a canvas shadow as a Gaussian blur whose σ is half the shadowBlur value. That is the same relation as the CSS blur radius, so this tool draws the shadows with the same radii as the CSS (text size × the em value), from the bottom layer up, and paints the letters last. For the border tube, the outer shadows are drawn only outside the box and the inner shadows only inside, which gives the same look as CSS box-shadow. Some browsers cap the blur of canvas shadows, so for very wide layers the tool draws on a smaller canvas with a proportionally smaller blur and scales it back up, which keeps the same σ. If you save with the power off, the PNG shows the unlit sign.

The brick and concrete patterns are the same as in the preview, scaled to the text size, so the composition you see on the stage is the one that gets saved. Choose Clear and the wall and the dark edges are left out, so only the letters and the glow remain. The glow is semi-transparent, so it looks faint in an image viewer with a white background, but over a dark photo or video it looks the way it did on the stage.

Flicker and the photosensitivity limit

Success Criterion 2.3.1 of WCAG 2.2 requires that a web page does not flash more than three times in any one second, or that the flashing stays below the general flash and red flash thresholds. A flash there is a pair of opposing changes in which brightness rises and falls by 10% or more of the maximum relative luminance, and the area is approximated by a 341×256 pixel rectangle on a 1024×768 screen, standing for a 10 degree field of view. A large sign can exceed that area, so this tool designs its flicker to respect the count limit whatever the area.

The count treats each dip in which brightness (opacity) falls by 0.1 or more and then rises by 0.1 or more as one, repeats the cycle end to end, and takes the largest number found in any one-second window. The CSS you copy includes a prefers-reduced-motion rule. MDN explains that this media feature detects whether the device is set to reduce motion that is not essential, and for a visitor with that setting on, the sign stays lit without flickering. The preview and the power-on ignition on this workspace also stay still under the same setting. When you switch the power on or change the sample or flicker, the flicker stops for at least 1 s and restarts from the beginning (after an ignition, 0.6 s after it ends), and the ignition is skipped if the sign was flickering, so the moment of change also stays at 2 per second or fewer.

The colors of real neon signs

Britannica explains that pure neon gas gives a reddish-orange light, and that other gases and combinations of them give other colors. Adding mercury vapor to the tube gives a bluish light. Every one of these is called a neon sign, but apart from reddish-orange the colors do not come from neon alone. The tube colors below are values picked on a screen (sRGB), so when you order a real sign, compare them with the maker's physical color samples.

Letter core color = each red, green and blue value of the glow color moved 78% of the way toward white (255). Example: for Hot pink, green 45 → 45 + (255 − 45) × 0.78 = 208.8 → 209 (D1).

Common mistakes

• Fixing the shadows in px: on a heading of another size, the glow loses its proportions. The code from this tool uses em units, so you only change font-size.
• Using it as is on a light background: the glow is a semi-transparent color and almost disappears on white. Darken the area behind the heading or place it on a dark band.
• A clipped glow: shadows do not enlarge the text box, so if a parent element has overflow:hidden or no margin, the glow is cut off as if with a knife. Leave space for the spread distance in the table above.
• Expecting non-Latin text to get the neon fonts: both neon fonts contain only Latin characters, so other scripts fall back to the default font. For those, compare with the sans-serif and serif fonts.
• Flickering too fast: if you edit the keyframes yourself and make the text flash more than three times a second, it exceeds the photosensitivity limit. Do not delete the reduced-motion rule either.

Limits and cautions

• The glow profile graph and the spread distances are estimates for a single stroke 0.1em thick. With thicker strokes or tightly set letters, the glows overlap and look brighter and wider.
• Sans-serif, serif and monospace are drawn with fonts installed on the device, so their shapes differ from device to device, and the PNG is saved with the fonts of the device you are using.
• The flicker count is an estimate based on opacity changes. WCAG judges flashes from the relative luminance and area on the real screen, so on a large display it is safer to use no flicker.
• The size, tube length, price and power use of a real sign are not calculated.

As of 2026-10-20, the relevant sentences in the standards and documents below were checked. The numbers in the tables are the same as this tool's calculations.

Sources

• 01W3C — CSS Backgrounds and Borders Module Level 3box-shadow blur: close to a Gaussian blur whose standard deviation is half the blur radius (within 5% per pixel)
• 02W3C — CSS Text Decoration Module Level 3, text-shadowValues are interpreted like box-shadow, the first shadow is on top, shadows do not affect layout or scrollable area
• 03WHATWG — HTML Living Standard, canvas shadowsA 2D Gaussian blur with σ equal to half of shadowBlur
• 04W3C — WCAG 2.2, 2.3.1 Three Flashes or Below ThresholdNo more than three flashes in any one second, definition of general flash (10% of maximum relative luminance, 0.80), 341×256 pixel approximation
• 05MDN — prefers-reduced-motionMedia feature that detects whether the device is set to reduce non-essential motion
• 06Britannica — Neon lampPure neon is reddish-orange, other gases and combinations give other colors, mercury vapor gives bluish light
• 07Google Fonts — Tilt NeonAndy Clymer, a typeface inspired by storefront signage lettering, OFL
• 08Google Fonts — NeonderthawRobert Leuschke, a single weight script that simulates neon, OFL
• 09SIL — OFL FAQ1.1 Use in design work such as logos, posters and signage without extra permission

Frequently asked questions

Tools to use with it