Générateur de texte en dégradé (CSS)
Écrivez le texte, choisissez deux ou trois couleurs et l’angle. L’aperçu montre le résultat sur fond clair et sur fond sombre.
Mode d’emploiUn titre en couleurs dégradées
Disponible en: 
Générateur de texte en dégradé (CSS): à quoi ça sert
Un titre aux lettres en dégradé attire l’attention sur la page d’accueil et les landing pages, et il se fait uniquement en CSS : le dégradé devient l’arrière-plan du texte et background-clip: text découpe cet arrière-plan selon la forme des lettres.
Le générateur construit le code avec le préfixe -webkit-, une couleur de secours pour les navigateurs sans prise en charge, l’ajustement pour le mode contraste élevé de Windows et, si vous le souhaitez, l’animation du dégradé, qui s’arrête pour les personnes qui préfèrent moins de mouvement. L’aperçu montre le titre sur fond clair et sur fond sombre.
Mode d’emploi
- Écrivez le texte et choisissez la police et la taille.
- Choisissez les couleurs et l’angle.
- Copiez le CSS et appliquez la classe au titre.
Quand l’utiliser
- Titre de la page d’accueil.
- Mise en avant d’un prix ou d’un appel à l’action.
- Logo en texte.
Questions fréquentes
Comment fonctionne le texte en dégradé ?
Le dégradé est l’arrière-plan de l’élément, et la propriété background-clip: text découpe cet arrière-plan selon la forme des lettres ; la couleur du texte est transparente pour laisser voir le fond. Cela fonctionne avec n’importe quelle police, et le texte reste sélectionnable et lu par les lecteurs d’écran.
Le préfixe -webkit- est-il nécessaire ?
Le code inclut -webkit-background-clip en plus de la version sans préfixe, car les navigateurs un peu plus anciens ne l’acceptent qu’avec le préfixe. La couleur de secours s’affiche là où rien de tout cela ne fonctionne.
Peut-on l’utiliser dans des paragraphes ?
Cela fonctionne, mais mieux vaut le réserver aux titres et aux courts passages mis en avant. Dans un texte courant, le dégradé fatigue la lecture et les parties les plus claires peuvent manquer de contraste avec le fond.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.