Text Gradient Generator
Créez des effets de texte dégradé CSS avec background-clip. Aperçu en direct, copiez CSS ou SVG instantanément.
① Saisissez votre texte ② Personnalisez couleurs, angle et style ③ Copiez le CSS du dégradé
Texte
Taille
Graisse
Police
Alignement
Type
Color stops
0%
100%
Préréglages
Hello World
background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;
Qu'est-ce que le texte dégradé CSS ?
Le texte dégradé CSS utilise la technique background-clip: text pour appliquer un dégradé comme couleur de remplissage du texte. En définissant -webkit-text-fill-color: transparent et background-clip: text, l'image dégradée est visible à travers la forme du texte. Fonctionne avec linear-gradient, radial-gradient et conic-gradient.
FAQ
background-clip: text découpe l'arrière-plan de l'élément à la forme de son texte. Combiné avec -webkit-text-fill-color: transparent, le dégradé utilisé comme arrière-plan devient visible uniquement à travers les caractères.
-webkit-text-fill-color remplace color pour le remplissage du texte dans les moteurs WebKit/Blink. L'utilisation de color: transparent seul peut ne pas masquer complètement le remplissage du texte dans tous les navigateurs.
Les dégradés linéaires font transitionner les couleurs le long d'une ligne droite à un angle choisi. Les radiaux rayonnent du centre vers l'extérieur. Les coniques balayent les couleurs autour d'un point central comme une roue chromatique.
Le support est excellent. Chrome, Edge, Opera et Firefox supportent background-clip: text sans préfixe. Safari nécessite le préfixe -webkit-background-clip: text. Cet outil génère les deux propriétés pour une compatibilité complète.
Définissez background-size à 200% 200% et animez background-position dans une règle @keyframes. Par exemple : @keyframes gradientShift { 0% { background-position: 0% 50% } 100% { background-position: 100% 50% } }.
Le texte dégradé fonctionne mieux pour les titres hero, les titres de section, les noms de marque et les éléments décoratifs. Évitez-le pour le texte de corps ou les petites tailles où les dégradés réduisent la lisibilité.
Vérifiez le contraste pour le color stop le plus clair par rapport à l'arrière-plan. Ne vous fiez pas uniquement à la couleur pour transmettre un sens. Testez à des tailles de police plus petites pour confirmer la lisibilité.