Neon Tube Draw

Neon & Glow · Animated · pure CSS

A neon sign that writes itself: the word is an inline SVG whose coloured stroke — the glass tube — draws on by animating stroke-dashoffset while a layered drop-shadow halo brightens to full glow. Once lit it holds with a faint buzz, powers down in a broken-sign flicker, then silently resets and redraws on an endless loop.

Open in the generator →All effects

How it works

Neon Tube Draw is an animated neon & glow text effect rendered entirely in CSS. It relies on an inline SVG <defs> block (filters, gradients or clip-paths), which the HTML export carries alongside the CSS.

Controls

Neon Tube Draw exposes 3 dedicated controls — Hue, Draw Speed and Glow — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.

CSS

/* Neon Tube Draw — made with TEXT-FX · https://text-fx.app
 * HTML: requires the inline <svg> filter defs — see the HTML export.
 * Font: 'Bricolage Grotesque', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: none;
}

.text-effect {
  display: inline-block;
  vertical-align: middle;
  width: 5.58em;
  max-width: 100%;
  height: 1.3em;
  overflow: visible;
}
.text-effect text {
  fill: transparent;
  stroke: hsl(214 100% 70%);
  stroke-width: 0.045em;
  stroke-linejoin: round;
  stroke-linecap: round;
  text-anchor: middle;
  dominant-baseline: central;
  stroke-dasharray: 1000 800;
  stroke-dashoffset: 0;
  opacity: 1;
  filter: drop-shadow(0 0 3.4px hsl(214 100% 90%)) drop-shadow(0 0 12px hsl(214 100% 70%)) drop-shadow(0 0 27.6px hsl(214 100% 58% / 0.9));
  animation: text-effect-sign 7000ms ease-in-out infinite;
}

@keyframes text-effect-sign {
  0%   { stroke-dashoffset: 1000; opacity: 0.35; filter: drop-shadow(0 0 0px hsl(214 100% 90%)) drop-shadow(0 0 0px hsl(214 100% 70%)) drop-shadow(0 0 0px hsl(214 100% 58% / 0.9)); }
  8%   { opacity: 0.85; }
  26%  { stroke-dashoffset: 0; opacity: 1; filter: drop-shadow(0 0 3px hsl(214 100% 90%)) drop-shadow(0 0 10.8px hsl(214 100% 70%)) drop-shadow(0 0 24.8px hsl(214 100% 58% / 0.9)); }
  30%  { filter: drop-shadow(0 0 4.9px hsl(214 100% 90%)) drop-shadow(0 0 17.4px hsl(214 100% 70%)) drop-shadow(0 0 40px hsl(214 100% 58% / 0.9)); }
  38%  { filter: drop-shadow(0 0 3.4px hsl(214 100% 90%)) drop-shadow(0 0 12px hsl(214 100% 70%)) drop-shadow(0 0 27.6px hsl(214 100% 58% / 0.9)); }
  49%  { filter: drop-shadow(0 0 3.4px hsl(214 100% 90%)) drop-shadow(0 0 12px hsl(214 100% 70%)) drop-shadow(0 0 27.6px hsl(214 100% 58% / 0.9)); }
  51%  { filter: drop-shadow(0 0 2.4px hsl(214 100% 90%)) drop-shadow(0 0 8.6px hsl(214 100% 70%)) drop-shadow(0 0 19.9px hsl(214 100% 58% / 0.9)); }
  53%  { filter: drop-shadow(0 0 3.5px hsl(214 100% 90%)) drop-shadow(0 0 12.6px hsl(214 100% 70%)) drop-shadow(0 0 29px hsl(214 100% 58% / 0.9)); }
  66%  { opacity: 1; filter: drop-shadow(0 0 3.4px hsl(214 100% 90%)) drop-shadow(0 0 12px hsl(214 100% 70%)) drop-shadow(0 0 27.6px hsl(214 100% 58% / 0.9)); }
  69%  { opacity: 0.28; filter: drop-shadow(0 0 0.7px hsl(214 100% 90%)) drop-shadow(0 0 2.6px hsl(214 100% 70%)) drop-shadow(0 0 6.1px hsl(214 100% 58% / 0.9)); }
  71%  { opacity: 1; filter: drop-shadow(0 0 3.8px hsl(214 100% 90%)) drop-shadow(0 0 13.4px hsl(214 100% 70%)) drop-shadow(0 0 30.9px hsl(214 100% 58% / 0.9)); }
  73%  { opacity: 0.14; filter: drop-shadow(0 0 0.3px hsl(214 100% 90%)) drop-shadow(0 0 1.2px hsl(214 100% 70%)) drop-shadow(0 0 2.8px hsl(214 100% 58% / 0.9)); }
  75%  { opacity: 0.9; filter: drop-shadow(0 0 2.6px hsl(214 100% 90%)) drop-shadow(0 0 9.4px hsl(214 100% 70%)) drop-shadow(0 0 21.5px hsl(214 100% 58% / 0.9)); }
  77%  { opacity: 0.08; filter: drop-shadow(0 0 0.2px hsl(214 100% 90%)) drop-shadow(0 0 0.6px hsl(214 100% 70%)) drop-shadow(0 0 1.4px hsl(214 100% 58% / 0.9)); }
  80%  { opacity: 0.55; filter: drop-shadow(0 0 1.3px hsl(214 100% 90%)) drop-shadow(0 0 4.8px hsl(214 100% 70%)) drop-shadow(0 0 11px hsl(214 100% 58% / 0.9)); }
  84%  { stroke-dashoffset: 0; opacity: 0; filter: drop-shadow(0 0 0px hsl(214 100% 90%)) drop-shadow(0 0 0px hsl(214 100% 70%)) drop-shadow(0 0 0px hsl(214 100% 58% / 0.9)); }
  100% { stroke-dashoffset: 1000; opacity: 0; filter: drop-shadow(0 0 0px hsl(214 100% 90%)) drop-shadow(0 0 0px hsl(214 100% 70%)) drop-shadow(0 0 0px hsl(214 100% 58% / 0.9)); }
}

HTML

This effect needs the markup below (per-letter spans, SVG defs, or a data-text attribute).

<!-- Made with TEXT-FX · https://text-fx.app -->

<style>
.text-effect {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: none;
}

.text-effect {
  display: inline-block;
  vertical-align: middle;
  width: 5.58em;
  max-width: 100%;
  height: 1.3em;
  overflow: visible;
}
.text-effect text {
  fill: transparent;
  stroke: hsl(214 100% 70%);
  stroke-width: 0.045em;
  stroke-linejoin: round;
  stroke-linecap: round;
  text-anchor: middle;
  dominant-baseline: central;
  stroke-dasharray: 1000 800;
  stroke-dashoffset: 0;
  opacity: 1;
  filter: drop-shadow(0 0 3.4px hsl(214 100% 90%)) drop-shadow(0 0 12px hsl(214 100% 70%)) drop-shadow(0 0 27.6px hsl(214 100% 58% / 0.9));
  animation: text-effect-sign 7000ms ease-in-out infinite;
}

@keyframes text-effect-sign {
  0%   { stroke-dashoffset: 1000; opacity: 0.35; filter: drop-shadow(0 0 0px hsl(214 100% 90%)) drop-shadow(0 0 0px hsl(214 100% 70%)) drop-shadow(0 0 0px hsl(214 100% 58% / 0.9)); }
  8%   { opacity: 0.85; }
  26%  { stroke-dashoffset: 0; opacity: 1; filter: drop-shadow(0 0 3px hsl(214 100% 90%)) drop-shadow(0 0 10.8px hsl(214 100% 70%)) drop-shadow(0 0 24.8px hsl(214 100% 58% / 0.9)); }
  30%  { filter: drop-shadow(0 0 4.9px hsl(214 100% 90%)) drop-shadow(0 0 17.4px hsl(214 100% 70%)) drop-shadow(0 0 40px hsl(214 100% 58% / 0.9)); }
  38%  { filter: drop-shadow(0 0 3.4px hsl(214 100% 90%)) drop-shadow(0 0 12px hsl(214 100% 70%)) drop-shadow(0 0 27.6px hsl(214 100% 58% / 0.9)); }
  49%  { filter: drop-shadow(0 0 3.4px hsl(214 100% 90%)) drop-shadow(0 0 12px hsl(214 100% 70%)) drop-shadow(0 0 27.6px hsl(214 100% 58% / 0.9)); }
  51%  { filter: drop-shadow(0 0 2.4px hsl(214 100% 90%)) drop-shadow(0 0 8.6px hsl(214 100% 70%)) drop-shadow(0 0 19.9px hsl(214 100% 58% / 0.9)); }
  53%  { filter: drop-shadow(0 0 3.5px hsl(214 100% 90%)) drop-shadow(0 0 12.6px hsl(214 100% 70%)) drop-shadow(0 0 29px hsl(214 100% 58% / 0.9)); }
  66%  { opacity: 1; filter: drop-shadow(0 0 3.4px hsl(214 100% 90%)) drop-shadow(0 0 12px hsl(214 100% 70%)) drop-shadow(0 0 27.6px hsl(214 100% 58% / 0.9)); }
  69%  { opacity: 0.28; filter: drop-shadow(0 0 0.7px hsl(214 100% 90%)) drop-shadow(0 0 2.6px hsl(214 100% 70%)) drop-shadow(0 0 6.1px hsl(214 100% 58% / 0.9)); }
  71%  { opacity: 1; filter: drop-shadow(0 0 3.8px hsl(214 100% 90%)) drop-shadow(0 0 13.4px hsl(214 100% 70%)) drop-shadow(0 0 30.9px hsl(214 100% 58% / 0.9)); }
  73%  { opacity: 0.14; filter: drop-shadow(0 0 0.3px hsl(214 100% 90%)) drop-shadow(0 0 1.2px hsl(214 100% 70%)) drop-shadow(0 0 2.8px hsl(214 100% 58% / 0.9)); }
  75%  { opacity: 0.9; filter: drop-shadow(0 0 2.6px hsl(214 100% 90%)) drop-shadow(0 0 9.4px hsl(214 100% 70%)) drop-shadow(0 0 21.5px hsl(214 100% 58% / 0.9)); }
  77%  { opacity: 0.08; filter: drop-shadow(0 0 0.2px hsl(214 100% 90%)) drop-shadow(0 0 0.6px hsl(214 100% 70%)) drop-shadow(0 0 1.4px hsl(214 100% 58% / 0.9)); }
  80%  { opacity: 0.55; filter: drop-shadow(0 0 1.3px hsl(214 100% 90%)) drop-shadow(0 0 4.8px hsl(214 100% 70%)) drop-shadow(0 0 11px hsl(214 100% 58% / 0.9)); }
  84%  { stroke-dashoffset: 0; opacity: 0; filter: drop-shadow(0 0 0px hsl(214 100% 90%)) drop-shadow(0 0 0px hsl(214 100% 70%)) drop-shadow(0 0 0px hsl(214 100% 58% / 0.9)); }
  100% { stroke-dashoffset: 1000; opacity: 0; filter: drop-shadow(0 0 0px hsl(214 100% 90%)) drop-shadow(0 0 0px hsl(214 100% 70%)) drop-shadow(0 0 0px hsl(214 100% 58% / 0.9)); }
}
</style>

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="text-effect"><text x="50%" y="50%">Your text</text></svg>
Category
Neon & Glow
Type
Animated
Browser support
SVG <text> stroke self-draw + drop-shadow glow (all modern browsers)
Capabilities
svgDefs

Related Neon & Glow effects