Neon Glow
Multilayer pure-CSS neon halo with realistic irregular flickering — one class to add, zero JavaScript.
You'll get access to the interactive demo with a free account.
This effect is part of Effect.Labs — 811 vanilla effects, some free, some premium. Text has 56 effects, including 4 free. Explore the category →
3 usage examples
How it works
Five stacked text-shadow layers create the neon tube depth: two small-radius white layers (5 px, 10 px) form the incandescent core; three magenta #ff00de layers at increasing radii (20 px, 40 px, 80 px) produce the diffuse aura whose intensity naturally fades with distance, like a real gas discharge in a tube.
The neonGlowFlicker animation uses precise keyframe stops: at 20%, 24%, and 55%, text-shadow is set to none — an abrupt extinction that mimics a failing tube. All other percentages (0–19%, 21–23%, 25–54%, 56–100%) hold the glow at full intensity. The alternate direction replays the sequence in reverse on the next half-cycle: extinctions fall at different moments each pass, producing an asymmetric, non-repeating flicker that avoids a mechanical feel.
The architecture is deliberately minimal: the class .text-neon-glow goes directly on any text element — <h1>, <h2>, <span> — with no mandatory wrapper. The class .demo-text adds the typographic settings (size, weight, tracking). Zero JavaScript, zero external dependencies.
Accessibility
- prefers-reduced-motion not implemented: the animation runs continuously even if the OS signals a reduced-motion preference. Recommended fix before shipping:
@media (prefers-reduced-motion: reduce) { .text-neon-glow { animation: none; } }. - Text contrast:
#fffon the dark background#0a0a0fachieves a ratio ≥ 7:1 (WCAG AAA). The halo does not degrade readability. - The effect is purely decorative: the meaning of the text does not depend on the glow to be understood.
- No keyboard or mouse interaction is triggered by the effect — no focus trap, no event listener.
- The element can receive
aria-hidden="true"if the glowing text is redundant with another accessible label elsewhere in the DOM.
Browser compatibility
Requires multi-layer text-shadow and CSS @keyframes — supported in all modern browsers without vendor prefixes since approximately 2015. Zero JavaScript dependency.
On browsers without <code>@keyframes</code> support, the text renders with the static <code>text-shadow</code> from <code>.text-neon-glow</code> (fixed halo, no flickering). The page remains readable and functional.
The code
HTML structure to paste into your page (CSS + JS available with a premium account):
<div class="demo-preview">
<span class="demo-text text-neon-glow">GLOW</span>
</div>Full HTML + CSS + JS, copy-paste ready — with hundreds of premium effects.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| #ff00de in .text-neon-glow | #ff00de | Neon color — 3 occurrences in text-shadow. Replace with #00c3ff (cyan), #39ff14 (green), or #ff4500 (orange-red). Mirror the same color in the keyframe's active stops. |
| 5px, 10px (white layers in text-shadow) | 5px / 10px | Inner core intensity. Reduce to 3 px/6 px for a thin tube; increase to 8 px/16 px for a thicker, brighter core. |
| 20px, 40px, 80px (neon layers in text-shadow) | 20px / 40px / 80px | Aura diffusion radius. Larger values (e.g., 30/60/120 px) give a wider halo, ideal for large display headings. |
| 1.5s in animation | 1.5s | Half-cycle flicker duration. Reduce to 0.6 s for rapid, nervous flickering; increase to 4 s for a slow, hypnotic pulse. |
| 20%, 24%, 55% in @keyframes neonGlowFlicker | 20% / 24% / 55% | Extinction moments within one cycle. Move or multiply these stops to change the frequency and rhythm of blackouts. |
| font-size in .demo-text | 2.5rem | Text size. Works from 0.7 rem (small label) to 8 rem (full-page heading) without adjustment. |
| font-weight in .demo-text | 800 | Text weight. 400 for a thin, elegant neon; 900 for maximum impact with a wider halo on letter stems. |
| letter-spacing in .demo-text | -.02em | Letter spacing. Set to 0.15–0.25 em for short uppercase text (labels, acronyms, initials). |
FAQ
#ff00de with your chosen color in the three text-shadow occurrences inside .text-neon-glow and the two occurrences in the keyframe's active stops. To use multiple colors on the same page, create variant classes — e.g., .text-neon-cyan { text-shadow: #fff 0 0 5px, #fff 0 0 10px, #00c3ff 0 0 20px, #00c3ff 0 0 40px, #00c3ff 0 0 80px; animation: 1.5s ease infinite alternate neonGlowFlicker; }..text-neon-glow to any text element (<h1>, <h2>, <span>…) and the animation starts automatically. No initialization, no function call.animation-delay property. Define variants with staggered delays (e.g., 0s, 0.4s, 0.9s) so multiple elements do not go dark at the exact same moment, reinforcing the impression of independent neon tubes.
