Générateur d'effets texte CSS
Saisissez votre propre texte et visualisez en direct des effets CSS de néon, extrusion 3D, gaufrage/estampage, contour et remplissage dégradé, avec des paramètres calculés mathématiquement et un bloc CSS copiable.
🔒 Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
La plupart des galeries d'effets texte CSS vous imposent un préréglage figé : un 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 saisissez. Choisissez néon, extrusion 3D, gaufrage/estampage, contour ou remplissage dégradé dans la liste, ajustez les commandes spécifiques à l'effet, et l'aperçu en direct ainsi que le bloc CSS copiable se mettent à jour à chaque modification.
L'effet extrusion 3D mérite explication : pour une profondeur donnée (nombre de couches empilées) et un angle, la couche i est décalée horizontalement de i × cos(angle) et verticalement de i × sin(angle). Ces valeurs sont calculées en JavaScript à l'aide des fonctions trigonométriques réelles, pas lues dans une table de correspondance d'angles prédéfinis. À 45 degrés, les décalages horizontal et vertical deviennent identiques pour chaque couche, car le cosinus et le sinus de 45° ont la même valeur ; faites tourner le curseur d'angle et regardez toute la pile de couches text-shadow pivoter autour des lettres en temps réel, chaque couche étant un peu plus foncée que la précédente pour donner l'illusion d'une face 3D éclairée.
Le néon lumineux superpose quatre couches text-shadow de rayon de flou croissant dans la couleur choisie, avec un scintillement optionnel : activez-le et une règle @keyframes avec une séquence aléatoire de baisses d'opacité est générée et animée en direct ; un bouton de brassage vous permet de relancer le motif sans écrire la moindre image clé à la main. Le texte contouré applique -webkit-text-stroke pour les navigateurs qui le prennent en charge, ainsi qu'une solution de repli fiable par text-shadow à 8 directions pour les autres — les deux lignes figurent dans le CSS copié, accompagnées d'une note explicative. Le remplissage dégradé découpe un linear-gradient à la forme du texte à l'aide de background-clip: text, désormais une propriété standard largement supportée, tout en conservant l'ancienne ligne préfixée -webkit- pour les moteurs historiques.
Tout s'exécute localement dans votre navigateur — aucun texte saisi n'est jamais envoyé où que ce soit. Copiez le bloc CSS complet, y compris la règle @keyframes lorsque l'effet le nécessite, directement dans votre feuille de styles.