CSS Neon Text Effect

Features

• Layered text-shadows; the count and radii follow the intensity
• Tube colour and text colour adjusted separately — a white with a hint of the tube colour reads more like a tube core than pure white
• A single 0–100 intensity covering layer count, radius and opacity
• Type to preview — the tool provides a text input
• A dark preview backdrop, so the neon contrast holds immediately
• A copyable CSS rule below, with a `.neon` selector
• Syntax-highlighted code with a one-click copy button
• Everything is computed in your browser

How to use

1. Type a word in the box above
2. Pick the tube colour and drag the intensity to see the glow spread
3. Push the text colour toward white for a brighter tube, or pull it away from the tube colour for more edge
4. Copy the CSS when it looks right

FAQ

Why does one text-shadow not look like neon?

Because the neon look comes from a brightness gradient: brightest at the core, falling off quickly outward. A single shadow has one radius and one opacity, so it is either too solid (an outline) or too soft (a smudge). Stacking layers approximates the falloff: an opaque tight layer, a mid-transparency middle, a very faint outer one — and the eye reads "there is a glowing tube here" rather than "this text is outlined".

Why does this need a dark background?

Contrast. Neon presupposes a bright source in a dark environment; on a light background the glow blends into it and the type just looks dirty. To use it on a light interface you would have to weaken the glow so much that it stops being neon. Hence the dark preview backdrop — it is a condition of the effect, not styling.

Does glowing text affect accessibility?

Yes, in two ways. First, contrast: the glow softens the edges of the glyphs, which makes sustained reading harder — so this suits headings, logos and decorative text, not body copy. Second, strong glow bothers some users with visual sensitivity or migraine. The system `prefers-reduced-motion` preference does not cover static glow, but you can offer a "reduce effects" toggle or drop the glow under high-contrast mode.