Générateur de décoration de texte

• Aperçu en direct instantané : visualisez les changements de décoration du texte en temps réel pendant que vous ajustez style, couleur, épaisseur et décalage. Notre générateur met à jour l'aperçu instantanément, sans bouton à presser. Saisissez votre propre texte d'aperçu pour voir exactement le rendu de la décoration avec votre contenu.
• Prise en charge complète des propriétés CSS : contrôlez chaque propriété CSS text-decoration : ligne (souligné, ligne supérieure, barré), style (plein, double, pointillé, tireté, ondulé), couleur, épaisseur (1-10 px) et décalage du soulignement (0-20 px). Le générateur produit à la fois les propriétés individuelles et la notation abrégée.
• 100 % privé - aucun envoi au serveur : toute la génération du CSS de décoration de texte se fait localement dans votre navigateur. Votre texte et vos choix de design ne quittent jamais votre appareil et ne sont jamais envoyés à un serveur - parfaitement sûr pour les projets clients et les contenus propriétaires.
• Gratuit et sans inscription : générez un nombre illimité de CSS de décoration de texte sans inscription, sans abonnement et sans plafond d'utilisation. Notre générateur est entièrement gratuit pour toujours, sans limite d'utilisation.

La décoration de texte CSS ajoute des lignes visuelles au texte : soulignements en dessous, lignes supérieures au-dessus et barrés au milieu. La propriété abrégée text-decoration contrôle le type de ligne, le style, la couleur et l'épaisseur, tout en une seule déclaration. Le CSS moderne prend aussi en charge text-underline-offset et text-decoration-thickness pour un contrôle précis. Notre générateur facilite l'exploration visuelle de ces propriétés et l'obtention d'un CSS prêt pour la production.

1. Choisissez un préréglage ou commencez à personnaliser : parcourez 8 préréglages couvrant les styles de décoration de texte courants (soulignement classique, double soulignement, ondulé, ligne supérieure tiretée, barré pointillé, décalage épais, ondulé fin). Cliquez sur un préréglage pour l'appliquer instantanément.
2. Personnalisez chaque propriété : sélectionnez la ligne de décoration (souligné, ligne supérieure, barré ou aucun), choisissez parmi 5 styles (plein, double, pointillé, tireté, ondulé), sélectionnez n'importe quelle couleur via le sélecteur ou les préréglages, ajustez l'épaisseur avec un curseur (1-10 px) et définissez le décalage du soulignement (0-20 px ou auto). Saisissez votre propre texte d'aperçu et ajustez la taille et la graisse de la police pour correspondre à votre contexte de design.
3. Copiez le CSS : cliquez sur « Copier le CSS » pour copier le bloc CSS complet dans votre presse-papiers. Il inclut à la fois les déclarations de propriétés individuelles et la notation abrégée - prêt à coller dans votre feuille de styles.

• text-decoration-line : définit la ligne tracée. Utilisez underline pour les liens et l'emphase, overline pour les titres décoratifs, line-through pour les effets barrés (prix soldés, tâches terminées) ou none pour supprimer la décoration.
• text-decoration-style : contrôle le style visuel de la ligne. Choisissez solid pour les lignes standard, double pour deux lignes parallèles, dotted ou dashed pour des effets subtils, ou wavy pour des décorations ludiques ou signalant une erreur.
• text-decoration-color : définit la couleur indépendamment de la couleur du texte. Cela permet d'utiliser une couleur d'accent de marque pour les soulignements tout en gardant le corps du texte dans une couleur neutre - un schéma de design courant que notre générateur facilite.
• text-decoration-thickness : contrôle la largeur de la ligne (1-10 px). Les lignes plus épaisses sont plus visibles et peuvent servir d'élément de design, tandis que les lignes fines sont subtiles et discrètes. Utilisez le curseur de notre générateur pour trouver l'équilibre parfait.
• text-underline-offset : contrôle la distance entre la ligne de base du texte et le soulignement. Un décalage plus grand crée plus d'espace entre le texte et la ligne, améliorant la lisibilité des soulignements épais. Réglez sur auto pour la valeur par défaut du navigateur.

La forme abrégée text-decoration est prise en charge dans tous les navigateurs. Les propriétés individuelles comme text-decoration-thickness et text-underline-offset sont prises en charge dans Chrome 87+, Firefox 70+, Safari 12.1+ et Edge 87+. Le style ondulé bénéficie d'un large support sur tous les navigateurs modernes. Pour une compatibilité maximale, notre générateur fournit à la fois la syntaxe des propriétés individuelles et l'équivalent abrégé.