Neon Flicker Text
Chaque caractère brille sous 8 couches de text-shadow cyan et scintille comme une vraie enseigne néon — animation CSS pure, lettre par lettre.
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
La lueur est produite par 8 couches de text-shadow empilées sur .text-neon-sign : deux blanches serrées (5 et 10 px de rayon) simulent le cœur lumineux du tube, six cyan (#0ff) s'étalent de 20 à 150 px pour la diffusion ambiante caractéristique d'une vraie enseigne à gaz.
L'animation globale neonSign (0,08 s, infinite alternate) fait osciller l'ensemble entre le glow plein et un glow réduit à des instants précis (0 %, 20 %, 24 %, 55 %) — la durée ultra-courte crée le bourdonnement électrique typique d'un tube sous tension instable.
Les scintillements individuels de lettres sont gérés par une deuxième keyframe, neonSignLetter, appliquée via :nth-child sur les <span> enfants. Par défaut, les positions 2 et 4 reçoivent cette animation avec des durées et des délais légèrement différents (0,1 s / 0 s et 0,15 s / 0,3 s). La lettre tombe brièvement à 40 % d'opacité, rebondit à 60 %, puis se rallume — deux coupures désynchronisées qui imitent un caractère défectueux.
display: inline-block est requis sur chaque <span> fils : sans lui, les navigateurs ignorent opacity et text-shadow animés sur des éléments inline. L'effet est 100 % CSS, aucun JavaScript n'est nécessaire ni inclus.
Accessibilité
- Pas de
prefers-reduced-motiondans le code — l'animation tourne toujours. Pour respecter les préférences système, ajouter@media (prefers-reduced-motion: reduce) { .text-neon-sign, .text-neon-sign span { animation: none; } }— le glow statique (text-shadow fixe) reste visible. - Le texte est du HTML réel, lisible par les lecteurs d'écran sans attribut supplémentaire. Si l'effet est purement décoratif (le libellé est fourni autrement), ajouter
aria-hidden="true"sur le conteneur.text-neon-sign. - Contraste excellent : texte blanc (
#fff) sur fond sombre (#0a0a0f) — ratio > 21:1, WCAG AAA sans effort supplémentaire. - Aucune interaction clavier ni événement pointeur — l'effet est entièrement passif et ne capte pas le focus.
- Plusieurs instances sur la même page fonctionnent de façon indépendante : les animations CSS partagent les keyframes mais n'ont aucun état JS commun.
Compatibilité navigateur
Requiert CSS Animations, text-shadow multicouche et :nth-child — disponibles dans tous les navigateurs modernes. Zéro dépendance externe.
Sans support CSS Animations, le texte reste blanc avec son <code>text-shadow</code> fixe (halo statique cyan) — aucune erreur JS, la lisibilité est préservée.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<span class="demo-text text-neon-sign">
<span>N</span>
<span>É</span>
<span>O</span>
<span>N</span>
<!-- Un <span> par caractère -->
<!-- nth-child(2) et nth-child(4) scintillent par défaut -->
</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 |
|---|---|---|
| Couleur néon dans @keyframes neonSign et neonSignLetter | #0ff (cyan) | Remplacer les 6 occurrences de #0ff (cyan) dans les deux keyframes et dans text-shadow sur .text-neon-sign par la couleur cible : #f0f violet, #f30 rouge-orange, #0f8 vert électrique. Pour plusieurs couleurs sur la même page, dupliquer les keyframes avec un suffixe (neonSignRed) et créer une classe variante. |
| color sur .text-neon-sign | #fff | Couleur de base du texte. Garder blanc pour le maximum de brillance ; teinter légèrement (#ffe0ff pour un rose nacré) pour un rendu plus chaleureux. |
| animation-duration sur .text-neon-sign | 0.08s | Durée du cycle global de bourdonnement. En dessous de 0,06 s = vibration électrique intense ; entre 0,2 et 0,4 s = pulsation lente plus cinématique. |
| font-size sur .demo-text | 2.5rem | Plus la fonte est grande, plus les couches extérieures de glow fusionnent en halo — l'effet devient spectaculaire à partir de 4 rem. |
| font-family sur .text-neon-sign | Inter, sans-serif | Fonctionne avec toute police. Préférer les geometric sans-serif condensées (Inter, Barlow Condensed) pour un rendu authentique ; éviter les polices à empattements où le glow déborde sur les sérifs. |
| letter-spacing sur .demo-text | -0.02em | Élargir à 0,05–0,12 em laisse chaque halo de lettre respirer sans se fondre avec ses voisins — recommandé pour les mots de 5+ caractères. |
| Indices nth-child supplémentaires | 2 et 4 | Ajouter des règles :nth-child(n) pour d'autres indices afin de rendre plus de lettres instables. Décaler le animation-delay de 0,15–0,25 s entre chaque lettre pour désynchroniser les coupures. Éviter d'en animer plus de la moitié : au-delà, l'effet perd sa crédibilité. |
| opacity dans @keyframes neonSignLetter (0.4 et 0.6) | 0.4 / 0.6 | Valeur 0 = coupure totale (lettre noire), 0,7 = scintillement subtil. Les deux valeurs distinctes (0,4 à l'étape 41–42 % et 0,6 à 46–48 %) créent un double rebond plus organique qu'un simple aller-retour. |
FAQ
#0ff dans @keyframes neonSign et @keyframes neonSignLetter, puis mettre à jour les mêmes valeurs dans le text-shadow statique de .text-neon-sign. Pour coexister avec plusieurs couleurs sur la même page, dupliquer les keyframes sous un autre nom (neonSignRed, etc.) et créer une classe variante (.text-neon-red) qui les référence.:nth-child pour l'indice voulu en décalant le délai pour désynchroniser les coupures. Exemple : .text-neon-sign span:nth-child(3) { animation: 0.12s ease-in-out 0.22s infinite alternate neonSignLetter; }. Éviter d'animer plus de la moitié des caractères — au-delà, l'effet ressemble à un bug général plutôt qu'à un défaut localisé réaliste.@media (prefers-reduced-motion: reduce) { .text-neon-sign, .text-neon-sign span { animation: none; } } — le texte conserve alors son text-shadow fixe et reste pleinement lisible avec son halo statique, sans aucun mouvement.
