Générateur d'effets de texte CSS
Tapez votre propre texte et prévisualisez en direct les effets CSS réels de lueur au néon, d'extrusion 3D, de typographie, de contour et de remplissage en dégradé, avec des paramètres calculés par de vraies mathématiques et un bloc CSS copiable.
Résultat
La plupart des galeries d'effets de texte CSS vous proposent un préréglage fixe : une lueur néon, une extrusion 3D, à prendre ou à laisser. Ce générateur construit le CSS à partir de vos paramètres, sur le texte que vous tapez réellement. Choisissez une lueur néon, une extrusion 3D, une typographie/gaufrage, un contour ou un remplissage dégradé dans la sélection d'effet, ajustez les propres commandes de cet effet, et l'aperçu en direct ainsi que le bloc CSS copiable en dessous sont mis à jour à chaque modification.
L'effet d'extrusion 3D est celui qui mérite d'être compris : pour une profondeur (nombre de couches empilées) et un angle choisis, la couche i est décalée de i × cos (angle) horizontalement et de i × sin (angle) verticalement, calculée en JavaScript avec les fonctions trigonométriques réelles - non lues à partir d'une table de recherche d'angles prédéfinis. À 45 degrés, les décalages horizontaux et verticaux sont égaux pour chaque couche, car le cosinus et le sinus de 45° ont la même valeur ; faites pivoter le curseur d'angle et regardez toute la pile de calques « texte-ombre » se balancer autour des lettres en temps réel, chacun s'assombrissant un peu plus que le précédent pour simuler un visage 3D éclairé.
Neon Glow empile quatre couches « texte-ombre » de rayon de flou croissant dans la couleur de votre choix, avec un scintillement facultatif : activez-le et une règle « @keyframes » avec une séquence aléatoire de creux d'opacité est générée et animée en direct, et un bouton de lecture aléatoire vous permet de relancer le motif sans écrire une seule image clé à la main. Le texte souligné applique `-webkit-text-stroke` pour les navigateurs qui le prennent en charge, plus une solution de secours honnête `text-shadow` à 8 directions pour ceux qui ne le font pas - les deux lignes sont livrées dans le CSS copié avec une note expliquant pourquoi. Le remplissage en dégradé coupe un « dégradé linéaire » à la forme du texte avec « background-clip : text », désormais une propriété standard avec un large support, conservant l'ancienne ligne préfixée « -webkit- » pour les moteurs existants.
Tout s'affiche localement dans votre navigateur : aucun texte que vous tapez n'est envoyé nulle part. Copiez le bloc CSS terminé, y compris la règle `@keyframes` lorsque l'effet en a besoin, directement dans votre feuille de style.
Vos fichiers et entrées ne quittent jamais cet appareil. Le traitement s'effectue entièrement hors ligne. 100 % sécurisé.
Formats & règles acceptés
- Cinq effets réels – lueur néon, extrusion 3D, typographie/gaufrage, contour et remplissage dégradé – chacun avec ses propres commandes de paramètres (couleurs, curseurs de profondeur/angle, arrêts de dégradé).
- Neon Glow inclut une animation de scintillement facultative avec un motif d'opacité aléatoire « @keyframes » que vous pouvez remanier sans toucher le CSS à la main.
- L'extrusion 3D vous permet de faire glisser la profondeur (nombre de couches) et l'angle indépendamment ; le décalage des pixels de chaque calque et la teinte progressivement plus sombre sont recalculés en direct.
Avantages clés
Cas d'utilisation
- • Composez une enseigne au néon pour rechercher un titre de page de destination, activez l'animation de scintillement aléatoire et copiez l'ombre de texte terminée plus le bloc @keyframes.
- • Réglez la profondeur d'extrusion 3D sur 8 et l'angle sur 30 degrés pour un traitement de logo isométrique volumineux, puis copiez la pile d'ombre de texte calculée directement dans votre feuille de style.
- • Créez un texte de titre décrit avec à la fois la ligne -webkit-text-stroke et sa solution de secours text-shadow incluses, de sorte que le plan apparaisse toujours dans les navigateurs sans prise en charge des traits.
Évaluez cet outil
