The neon sign - gas-tube lighting bent into script, mounted on brick, glowing through rain-slicked streets. As a design aesthetic, it translates into dark backgrounds, vivid glowing colour, script typography, and the deliberate imperfection of the flicker.
0 0 7px #FF2D78,
0 0 20px #FF2D78,
0 0 45px #FF2D78,
0 0 80px rgba(255,45,120,.4);
0 0 7px #00F5FF,
0 0 20px #00F5FF,
0 0 45px #00F5FF,
0 0 80px rgba(0,245,255,.4);
0 0 7px #39FF14,
0 0 20px #39FF14,
0 0 45px #39FF14,
0 0 80px rgba(57,255,20,.4);
0 0 7px #BF5FFF,
0 0 20px #BF5FFF,
0 0 45px #BF5FFF,
0 0 80px rgba(191,95,255,.4);
0 0 7px #FF6B35,
0 0 20px #FF6B35,
0 0 45px #FF6B35,
0 0 80px rgba(255,107,53,.4);
0 0 7px #FFE000,
0 0 20px #FFE000,
0 0 40px #FFE000,
0 0 70px rgba(255,224,0,.35);
0 0 7px #FF2D78;
0 0 7px #FF2D78,
0 0 20px #FF2D78;
0 0 7px #FF2D78,
0 0 20px #FF2D78,
0 0 45px #FF2D78;
0 0 7px #FF2D78,
0 0 20px #FF2D78,
0 0 45px #FF2D78,
0 0 80px rgba(…,.4);
Neon glow + flicker
Softer, slower flicker
+0.2em tracking
1.8 line-height
// Buttons
// Form Fields
// Tags & Progress
// Arrivals per hour - Tonight
Pure Darkness Required
Neon glow only reads against near-black (#04000E). Even mid-grey washes out the effect entirely. The background is not a neutral - it is an active part of the aesthetic, providing the contrast that makes light visible.
Four Layers, One Glow
Real neon emits light at multiple radii simultaneously. Replicate this with four text-shadow stops: edge (7px), bloom (20px), spread (45px), and ambient (80px rgba). Fewer layers look flat; more look garish.
The Imperfect Sign
Real neon tubes flicker, buzz, and occasionally drop out. CSS animations that occasionally reduce opacity to .5–.8 for a frame or two simulate this beautifully. Vary the timing - not all signs should flicker in sync.
Script is the Sign Face
Neon tubes are bent to form script lettering. Pacifico, Dancing Script, and similar cursive faces replicate this form. Geometric or grotesque type misses the essential character - use them only for sub-labels and data.