Créez des effets de texte néon lumineux personnalisés et copiez les styles CSS.
/* CSS Code will be generated here */
Créez des effets de texte néon lumineux personnalisés et copiez les styles CSS. Utilisez-le au travail, en développement, en apprentissage ou pour une vérification rapide.
Cet outil fonctionne dans le navigateur. Avant d'utiliser des données sensibles, assurez-vous que votre appareil et votre navigateur sont fiables.
Cet outil crée un texte lumineux façon enseigne au néon grâce à la propriété CSS text-shadow. À gauche, saisissez le texte d'aperçu puis réglez la taille de police (20 à 100 px), le rayon de la lueur (2 à 30 px), la couleur de la lueur et le style de police (Monospace, Sans-serif, Serif ou Cursive). L'aperçu se met à jour en direct et le CSS prêt à copier s'affiche dessous. Le réglage rose par défaut produit .neon-text { color: #ffffff; font-family: sans-serif; font-size: 48px; text-shadow: 0 0 4px #fff, 0 0 10px #ff007f, 0 0 20px #ff007f; } avec une animation de clignotement.
L'effet repose sur trois couches de text-shadow. La première est une lueur blanche de 4 px qui imite le cœur brillant du tube. La deuxième utilise votre couleur avec le rayon choisi comme flou, et la troisième reprend la même couleur avec un flou doublé pour former le halo extérieur. Le texte lui-même est blanc, car le centre d'un vrai tube néon paraît presque blanc et la couleur vient surtout de la lueur qui l'entoure. Un rayon plus grand donne un halo plus doux et plus large, mais il devient vite flou sur un petit texte : réduisez le rayon avec la taille de police.
Lorsque l'animation de clignotement est activée, le CSS contient une règle @keyframes neon-pulse : à mi-parcours, la lueur est réduite de moitié et l'opacité descend à 0,85, puis l'animation va et vient avec alternate et ease-in-out, comme si l'enseigne respirait. La vitesse va de 0,5 à 4 secondes ; plus le chiffre est bas, plus le clignotement est rapide. Les quatre thèmes prédéfinis (Cyberpunk, Aurore, Océan profond sans clignotement et Coucher de soleil) appliquent couleur, rayon, taille et animation en un clic.
Le néon rend mieux sur fond sombre ; sur fond blanc, le halo disparaît presque. Gardez un clignotement lent, car les flashs rapides peuvent gêner certaines personnes, et prévoyez de le désactiver avec la media query prefers-reduced-motion. text-shadow est du CSS pur, sans image ni JavaScript, pris en charge par tous les navigateurs modernes. La classe copiée s'appelle .neon-text : renommez-la puis appliquez-la à un titre ou un bouton.
On superpose plusieurs ombres text-shadow : un petit flou blanc pour le cœur du tube et deux flous colorés pour le halo. Cet outil génère 0 0 4px #fff, 0 0 [rayon] [couleur], 0 0 [2 × rayon] [couleur] et met le texte en blanc.
Le halo est un flou coloré semi-transparent qui contraste très peu avec un fond clair. Utilisez un fond noir, bleu nuit ou autre teinte sombre, ou passez la couleur du texte lui-même à la couleur de la lueur.
Animer text-shadow oblige le navigateur à redessiner en continu. Pour un ou deux titres, aucun souci ; beaucoup d'éléments qui clignotent peuvent en revanche ralentir un appareil modeste. Les flashs rapides gênent aussi les personnes sensibles à la lumière : choisissez une vitesse lente et respectez prefers-reduced-motion.
L'outil propose quatre familles génériques. Pour une police Google Fonts ou la vôtre, copiez le CSS et remplacez font-family par le nom de la police ; les ombres et l'animation continuent de fonctionner.
Voir cette catégorie: Design & Couleurs
Extrayez la couleur exacte de n'importe quel pixel d'une image chargée.
Ajustez et prévisualisez visuellement les dispositions CSS Flexbox et Grid avec animations et copie de code en temps réel.
Générez des combinaisons de couleurs harmonieuses et exportez les valeurs HEX/RGB.
Nettoyez et compressez le code SVG localement avec comparaison de taille.
