Neon Glow
Halo néon multicouche en pur CSS avec scintillement irrégulier réaliste — une seule classe à ajouter, zéro JavaScript.
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
Cinq couches de text-shadow superposées créent la profondeur du tube néon : deux couches blanches de petit rayon (5 px, 10 px) forment le noyau incandescent ; trois couches magenta #ff00de aux rayons croissants (20 px, 40 px, 80 px) génèrent l'aura diffuse dont l'intensité décroît naturellement avec la distance, comme une vraie décharge dans un tube de gaz.
L'animation neonGlowFlicker est définie par des stops précis dans les keyframes : aux pourcentages 20 %, 24 % et 55 %, text-shadow est basculé à none — extinction brutale qui imite un tube défaillant. Les autres pourcentages (0–19 %, 21–23 %, 25–54 %, 56–100 %) maintiennent le glow à plein. La direction alternate rejoue la séquence à l'envers sur le cycle suivant : les extinctions tombent à des instants différents d'un demi-cycle à l'autre, produisant un scintillement asymétrique et non répétitif qui évite l'effet mécanique.
L'architecture est délibérément minimaliste : la classe .text-neon-glow se pose directement sur n'importe quel élément texte — <h1>, <h2>, <span> — sans wrapper obligatoire. La classe .demo-text complète les réglages typographiques (taille, graisse, tracking). Zéro JavaScript, zéro dépendance externe.
Accessibilité
- prefers-reduced-motion absent du code : l'animation tourne sans interruption même si l'OS signale une préférence réduite. Correction recommandée avant mise en production :
@media (prefers-reduced-motion: reduce) { .text-neon-glow { animation: none; } }. - Contraste texte : la couleur
#fffsur fond sombre#0a0a0fatteint un ratio ≥ 7:1 (WCAG AAA). Le halo ne dégrade pas la lisibilité. - L'effet est purement décoratif : le sens du texte ne dépend pas du halo pour être compris.
- Aucune interaction clavier ou souris n'est déclenchée — pas de piège au focus, pas de gestionnaire d'événement.
- L'élément peut recevoir
aria-hidden="true"si le texte lumineux est redondant avec un autre label accessible dans le DOM.
Compatibilité navigateur
Nécessite text-shadow multi-couches et @keyframes CSS — supportés dans tous les navigateurs modernes sans préfixe depuis 2015 environ. Zéro dépendance JavaScript.
Sur un navigateur sans support <code>@keyframes</code>, le texte s'affiche avec le <code>text-shadow</code> statique de <code>.text-neon-glow</code> (halo fixe sans scintillement). La page reste lisible et fonctionnelle.
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-glow">GLOW</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 dans .text-neon-glow | #ff00de | Couleur du néon — 3 occurrences dans text-shadow. Remplacez par #00c3ff (cyan), #39ff14 (vert), #ff4500 (rouge-orange). Répercuter la même couleur dans les stops du keyframe. |
| 5px, 10px (couches blanches dans text-shadow) | 5px / 10px | Intensité du noyau incandescent. Réduire à 3 px/6 px pour un tube fin ; augmenter à 8 px/16 px pour un tube plus épais et lumineux. |
| 20px, 40px, 80px (couches néon dans text-shadow) | 20px / 40px / 80px | Rayon de diffusion de l'aura. Des valeurs plus élevées (ex. 30/60/120 px) donnent un halo plus large, idéal pour les grands titres d'affiche. |
| 1.5s dans animation | 1.5s | Durée d'un demi-cycle de scintillement. Réduire à 0,6 s pour un clignotement rapide et nerveux ; augmenter à 4 s pour un scintillement lent et hypnotique. |
| 20%, 24%, 55% dans @keyframes neonGlowFlicker | 20% / 24% / 55% | Instants d'extinction du néon dans un cycle. Déplacez ou multipliez ces stops pour modifier la fréquence et le rythme des coupures. |
| font-size dans .demo-text | 2.5rem | Taille du texte. Fonctionne de 0,7 rem (label discret) à 8 rem (titre d'affiche pleine page) sans ajustement supplémentaire. |
| font-weight dans .demo-text | 800 | Graisse du texte. 400 pour un néon fin et élégant ; 900 pour un impact maximal avec un halo plus large sur le fût des lettres. |
| letter-spacing dans .demo-text | -.02em | Interlettrage. Passer à 0,15–0,25 em pour les textes courts en majuscules (labels, acronymes, initiales). |
FAQ
#ff00de par la couleur de votre choix dans les trois occurrences de text-shadow de .text-neon-glow et les deux occurrences dans les stops actifs du keyframe. Pour plusieurs couleurs sur la même page, créez des variantes de classe — ex. .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 sur n'importe quel élément texte (<h1>, <h2>, <span>…) et l'animation démarre automatiquement. Aucune initialisation, aucun appel de fonction.animation-delay. Définissez des variantes avec des délais décalés (ex. 0s, 0.4s, 0.9s) pour que plusieurs éléments ne s'éteignent pas exactement au même moment, renforçant l'impression de tubes néon indépendants et autonomes.
