Neon Flicker
Texte néon en pur CSS : cinq couches de text-shadow blanches et colorées clignotent à intervalles irréguliers pour imiter le scintillement d'un vrai tube au néon.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Texte comprend 56 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose sur cinq couches de text-shadow superposées, toutes centrées (décalage 0, 0) mais avec des rayons de diffusion croissants. Les deux premières (10 px, 20 px) utilisent le blanc #fff et forment le cœur lumineux du tube ; les trois suivantes (30 px, 40 px, 70 px) appliquent le magenta #ff00de pour le halo coloré extérieur. L'accumulation crée la saturation lumineuse caractéristique du verre fluorescent éclairé.
Le scintillement est produit par @keyframes neonFlicker : la propriété text-shadow est coupée à none uniquement aux paliers 20 %, 24 % et 55 %. Ces trois blackouts occupent chacun exactement 1 % de la durée d'animation — suffisant pour être perçu comme un clignotement, insuffisant pour ressembler à une panne. La durée totale de 1,5 s donne environ 40 clignotements par minute, en accord avec les fréquences observées sur un tube à gaz vieillissant.
La direction alternate de l'animation rejoue chaque cycle en sens inverse. Les coupures qui tombaient à 20 %, 24 % et 55 % à l'aller apparaissent à 45 %, 76 % et 80 % au retour, doublant la variété du pattern sans ajouter un seul keyframe. Le résultat est un scintillement qui ne se répète jamais exactement à la même cadence perçue.
L'effet est 100 % déclaratif : zéro JavaScript, zéro dépendance. La classe text-neon-flicker s'applique à n'importe quel élément texte — h1, span, p, button — sans modifier le balisage ni charger de fichier supplémentaire.
Accessibilité
- prefers-reduced-motion non géré : le code ne contient aucun bloc
@media (prefers-reduced-motion: reduce). L'animation tourne sur tous les appareils, y compris ceux configurés pour réduire les mouvements. Pour les projets accessibles, ajoutez :@media (prefers-reduced-motion: reduce) { .text-neon-flicker { animation: none; } } - Le texte reste lisible même lorsque le halo disparaît :
color: #fffest maintenu en permanence, indépendamment detext-shadow. Sur un fond sombre (#0a0a0f), le ratio de contraste blanc/fond est ≥ 7:1 — WCAG AAA sans l'effet. - L'animation est
infiniteet se lance automatiquement, sans bouton pause dans le balisage par défaut. WCAG 2.2.2 recommande un mécanisme de pause pour toute animation auto-lancée dépassant 5 secondes ; ajoutez un bouton qui basculeanimation-play-state: pausedsi le texte est un élément de premier plan. - Aucune balise ARIA n'est présente dans le balisage de base. Si l'élément texte joue le rôle d'un logo ou d'un titre graphique, ajoutez
role="img"etaria-labelpour les lecteurs d'écran. - Navigation au clavier : le balisage par défaut ne contient pas d'élément interactif. Si vous enveloppez le texte néon dans un lien ou un bouton, vérifiez le contraste du
:focus-visiblesur fond sombre.
Compatibilité navigateur
Utilise uniquement text-shadow et @keyframes CSS — pris en charge nativement dans tous les navigateurs modernes, sans préfixe vendeur.
Sans support des animations CSS, le texte s'affiche en blanc (<code>color: #fff</code>) avec le halo figé sur l'état initial défini dans <code>.text-neon-flicker</code>. Aucune erreur, aucune régression de lisibilité.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<!-- Appliquez text-neon-flicker sur n'importe quel élément texte -->
<span class="demo-text text-neon-flicker">NÉON</span>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| #ff00de (couleur néon) | Magenta #ff00de | Remplacez cette valeur aux 3 occurrences : dans les deux blocs de @keyframes neonFlicker (état actif) et dans la propriété text-shadow de .text-neon-flicker. Essayez cyan #00e5ff, vert #39ff14 ou orange #ff6600. |
| #fff (lueur intérieure) | Blanc #fff | Les deux premières couches de text-shadow (10 px, 20 px) forment le cœur lumineux. Changez en jaune pâle (#fffde0) pour un néon chaud, ou en cyan clair (#cffafe) pour un néon froid. |
| animation-duration (1.5s) | 1.5s | Durée d'un cycle complet. 1 s = scintillement rapide et nerveux ; 2–3 s = rythme lent et atmosphérique. À modifier dans la propriété animation de .text-neon-flicker. |
| Spreads text-shadow (10px 20px 30px 40px 70px) | 10 20 30 40 70 px | Ces cinq rayons de diffusion contrôlent l'intensité du halo. Réduisez (5 10 15 20 40) pour un néon discret ; augmentez (15 30 50 70 120) pour un effet saturé plein écran. |
| Paliers de coupure dans @keyframes (20%, 24%, 55%) | 20% 24% 55% | Les trois seuls points où text-shadow passe à none. Déplacez ou multipliez ces paliers pour varier la cadence — un seul palier à 50 % donne un flash unique par demi-cycle. |
| font-size sur .demo-text (2.5rem) | 2.5rem | Adaptez au contexte : 1,5 rem pour un badge compact, 6–10 rem pour une enseigne plein écran. L'effet text-shadow suit automatiquement la taille de police. |
| animation-play-state (running) | running | Passez à paused via JavaScript (el.style.animationPlayState = 'paused') pour geler l'animation sur son dernier état — utile pour un bouton pause accessible. |
FAQ
#ff00de aux trois endroits où il apparaît : dans les deux blocs actifs de @keyframes neonFlicker et dans la propriété text-shadow de la règle .text-neon-flicker. Les deux couches blanches (#fff à 10 px et 20 px) peuvent rester telles quelles ou être légèrement teintées pour réchauffer ou refroidir l'atmosphère.prefers-reduced-motion. Pour corriger cela, ajoutez en bas de votre feuille de styles : @media (prefers-reduced-motion: reduce) { .text-neon-flicker { animation: none; } }. Le texte reste visible en blanc avec le halo figé — aucune régression de lisibilité.h1, h2, p, button, a… La propriété text-shadow fonctionne sur tous. Seule contrainte : le fond derrière l'élément doit être sombre pour que le halo lumineux soit perceptible — sur fond blanc, l'effet disparaît.
