Neon Flicker Text
Each character glows with 8 layers of cyan text-shadow and flickers like a real neon sign — pure CSS animation, letter by letter.
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
The glow is produced by 8 stacked text-shadow layers on .text-neon-sign: two tight white ones (5 and 10 px radius) simulate the tube's bright core, six cyan ones (#0ff) spread from 20 to 150 px for the ambient diffusion characteristic of a real gas sign.
The global animation neonSign (0.08 s, infinite alternate) oscillates the whole text between full glow and reduced glow at precise keyframe offsets (0 %, 20 %, 24 %, 55 %) — the ultra-short duration produces the electric buzz typical of an unstable tube.
Individual letter flickers are handled by a second keyframe, neonSignLetter, applied via :nth-child on child <span> elements. By default, positions 2 and 4 receive this animation with slightly different durations and delays (0.1 s / 0 s and 0.15 s / 0.3 s). The letter briefly drops to 40 % opacity, bounces to 60 %, then snaps back — two desynchronised cuts that mimic a defective character.
display: inline-block is required on each child <span>: without it, browsers ignore animated opacity and text-shadow on inline elements. The effect is 100 % CSS — no JavaScript is needed or included.
Accessibility
- No
prefers-reduced-motionin the code — the animation always runs. To respect system preferences, add@media (prefers-reduced-motion: reduce) { .text-neon-sign, .text-neon-sign span { animation: none; } }— the static glow (fixed text-shadow) remains visible. - The text is real HTML content, readable by screen readers without extra attributes. If the effect is purely decorative (the label is provided elsewhere), add
aria-hidden="true"to the.text-neon-signcontainer. - Excellent contrast: white text (
#fff) on a dark background (#0a0a0f) — ratio > 21:1, WCAG AAA with no extra effort. - No keyboard interaction or pointer events — the effect is entirely passive and does not capture focus.
- Multiple instances on the same page work independently: CSS animations share the keyframes but have no shared JS state.
Browser compatibility
Requires CSS Animations, multi-layer text-shadow, and :nth-child — available in all modern browsers. Zero external dependency.
Without CSS Animations support, the text remains white with its fixed <code>text-shadow</code> (static cyan halo) — no JS errors, readability is preserved.
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-sign">
<span>N</span>
<span>E</span>
<span>O</span>
<span>N</span>
<!-- One <span> per character -->
<!-- nth-child(2) and nth-child(4) flicker by default -->
</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 |
|---|---|---|
| Neon color inside @keyframes neonSign and neonSignLetter | #0ff (cyan) | Replace the 6 occurrences of #0ff in both keyframes and in the static text-shadow on .text-neon-sign: #f0f purple, #f30 red-orange, #0f8 electric green. For multiple colors on the same page, duplicate the keyframes under a different name (neonSignRed) and create a variant class. |
| color on .text-neon-sign | #fff | Base text color. Keep white for maximum brightness; tint slightly (#ffe0ff for pearlescent pink) for a softer look. |
| animation-duration on .text-neon-sign | 0.08s | Duration of the global buzz cycle. Below 0.06 s = intense electric vibration; between 0.2 and 0.4 s = slow, cinematic pulse. |
| font-size on .demo-text | 2.5rem | The larger the font, the more the outer glow layers merge into a halo — the effect becomes spectacular from 4 rem upward. |
| font-family on .text-neon-sign | Inter, sans-serif | Works with any typeface. Prefer condensed geometric sans-serifs (Inter, Barlow Condensed) for an authentic look; avoid serif faces where glow bleeds onto serifs. |
| letter-spacing on .demo-text | -0.02em | Widening to 0.05–0.12 em lets each letter halo breathe without merging with its neighbours — recommended for words of 5+ characters. |
| Extra nth-child indices | 2 and 4 | Add :nth-child(n) rules for other indices to make more letters unstable. Offset animation-delay by 0.15–0.25 s between each letter to desynchronise the cuts. Avoid animating more than half the characters — beyond that, the effect reads as a global glitch rather than a localised defect. |
| opacity in @keyframes neonSignLetter (0.4 and 0.6) | 0.4 / 0.6 | Value 0 = full blackout, 0.7 = subtle shimmer. The two distinct values (0.4 at 41–42 % and 0.6 at 46–48 %) produce a double bounce more organic than a simple on/off. |
FAQ
#0ff in @keyframes neonSign and @keyframes neonSignLetter, then update the matching values in the static text-shadow on .text-neon-sign. To use multiple colours on the same page, duplicate the keyframes under a new name (neonSignRed, etc.) and create a variant class (.text-neon-red) that references them.:nth-child rule for the desired index and offset the delay to desynchronise the cuts. Example for the 3rd character: .text-neon-sign span:nth-child(3) { animation: 0.12s ease-in-out 0.22s infinite alternate neonSignLetter; }. Avoid animating more than half the characters — beyond that, the effect looks like a general glitch rather than a realistic localised defect.@media (prefers-reduced-motion: reduce) { .text-neon-sign, .text-neon-sign span { animation: none; } } — the text then keeps its fixed text-shadow and remains fully readable with its static halo, no movement at all.
