Neon Text Previewer

The neon text previewer layers a glow around a bright core, which is what makes CSS neon read as a lit tube rather than as coloured blur. The halo and the core are separate layers, and a white highlight at the centre is what completes the effect.

What is Neon Text Previewer?

The neon text previewer builds six stacked glow layers around white type and exports the CSS that produces the tube effect.

• The text glow stack is six layers: a white highlight at a four-pixel blur, then two full-colour layers at seven and twenty-one pixels, then three progressively larger layers at 42, 82 and 102 pixels with their alpha baked into the colour.
• Glow intensity runs from 0.2 to 2 and scales every blur radius and every alpha together, so the tube can be dialled from a faint edge to a heavy bloom.
• The glow colour accepts a picker or a typed hex value, and the outer radius is reported as the largest blur multiplied by the intensity.
• The background defaults to a very dark navy, and it is adjustable, because the effect depends on a dark ground more than on any other single setting.
• The text itself stays white at weight 600 with a little tracking, which is what a lit tube looks like at its core.

The layering is the technique. A single coloured shadow around white text reads as a soft smear; what makes neon convincing is the progression from the hot white centre out through the full-strength colour and into progressively larger halos with falling alpha. The alphas are written as 8-digit hex colours, which is the compact way to express a colour and its transparency together, and they are computed from the intensity so the whole glow scales from one control rather than six. The panel also states the readability caveat: the glow decorates, and a solid core is what keeps the text legible. At high intensity the halo bleeds into the letter spacing and the effective contrast of the letters against their ground drops, which is why the core stays white rather than taking the glow colour. The generated declaration sets the type to white and carries the six layers in order, leaving the background to whatever element it is applied to rather than baking in the dark navy shown in the preview.

• The eight-digit hex alpha form is well supported in modern browsers, but it is the reason the exported CSS is not suitable for a target that requires older syntax.
• Only one glow colour is produced, so a two-tube sign in contrasting colours needs two elements.
• High intensity values bloom into the gaps between letters and reduce legibility, and nothing enforces a maximum beyond the slider's range.
• Six blurred shadows on large text is a heavy paint cost, and the panel does not report it the way the extrusion tool does.
• The effect assumes a dark background: on a light surface the glow washes out the letters rather than surrounding them.

Use it for signage-style headings, a night-mode hero, or a seasonal treatment where the glow is the point, and keep the intensity low when the words have to be read rather than admired. Where the letter needs shade rather than light, the shadow text generator covers depth, the 3D text effect preview covers extrusion, and a fill that changes across the letter is the text gradient maker's job.

How to use Neon Text Previewer

1. Type the words and set the size, then choose a background dark enough for the glow to read against.
2. Pick the glow colour, which is the tube's colour, and leave the text itself white since the highlight is what reads as the lit core.
3. Raise the intensity and watch the outer glow radius readout, stopping before the halo bleeds into the word spacing.
4. Copy the CSS and re-check the letters at their final size, since legibility falls as the glow grows.

When to use Neon Text Previewer vs related tools

Reach for it when a heading wants a sign-like glow, when a dark theme needs an accent treatment for a few words, or when an existing neon effect looks like coloured blur rather than a lit tube and the layer structure needs explaining. Where the effect is depth rather than light, the shadow text generator stacks soft shadows, the 3D text effect preview builds an extrusion, and the outlined text generator produces the hollow form that a glow sits well inside.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Neon Text Previewer