Neon sign ignite + flicker

Letters fade in one by one with realistic neon ignition flicker, then settle and twinkle. Pure CSS.

Effects Captured JS-free

Use when — the brand voice is retro/diner/Vegas/arcade and you want the hero word-mark to feel like an actual neon sign coming alive. Use sparingly — one neon moment per page max. Pair with dark background for the glow to read.

Live demo

Chevy

How it works

Each letter is its own <span>, all starting at near-zero opacity in a dim "off" color. Two animations run in sequence: ignite (4s, runs once) maps the keyframe percentages to a realistic ignition pattern — initial flash, sputter, partial light, full ignition. After that, flicker (infinite, ~6s loop) drops opacity briefly at random-looking moments to keep the sign feeling "alive." Each letter has its own animation-delay so they ignite in a scattered order, not left-to-right (more realistic).

The keyframe (the hard part)

@keyframes ignite-red {
  0%   { opacity: 0.06; color: #2a0008; text-shadow: none; }
  3%   { opacity: 0.7;  text-shadow: 0 0 4px #ff1456, 0 0 12px #ff1456; }
  4%   { opacity: 0.08; text-shadow: none; }            /* sputter off */
  7%   { opacity: 0.5; }                                 /* half on */
  9%   { opacity: 0.15; }                                /* off again */
  13%  { opacity: 0.85; text-shadow: 0 0 4px #fff, 0 0 11px #ff1456, 0 0 25px #ff1456; }
  20%  { opacity: 0.92; text-shadow: 0 0 4px #fff, 0 0 30px #ff1456, 0 0 55px #ff1456; }
  30%, 100% {
    opacity: 1; color: #ffeaef;
    text-shadow: 0 0 4px #fff, 0 0 19px #ff1456, 0 0 40px #ff1456, 0 0 70px #ff1456;
  }
}

Tuning notes

Stagger naturally — randomise the per-letter animation-delay values. Lefty-to-righty order looks fake. Mix it up: 0.2s, 1.1s, 0.55s, 1.45s, 0.85s.

Two colors, two keyframes — for a sign with multiple words in different colors, duplicate the keyframe with different text-shadow hex codes (red #ff1456, cyan #00d4ff, blue #0066ff, yellow #ffaa00).

Wrap each letter in a span — the only way to delay each letter independently. Worth the HTML noise for this effect.

Reduced-motion fallback — turn off the animation and pre-light the sign to its final glow state. Don't show a dark, unanimated sign.

Source: Chevy 55 sport bar landing page (user-uploaded HTML, 2026-05-18). Personal reference — re-implement with your own letterforms before reusing in client work.