ZenovayTools

Générateur de texte dégradé CSS

Créez des effets de texte dégradé avec CSS. Choisissez les couleurs, l'angle et le type de dégradé. Aperçu en direct avec code CSS prêt à copier.

Presets

Text

Font size72px

Gradient

Angle90°

Color stops

#ec48990%
#a855f750%
#3b82f6100%

Preview

Gradient Text
CSS Output
background: linear-gradient(90deg, #ec4899 0%, #a855f7 50%, #3b82f6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;

Comment utiliser Générateur de texte dégradé CSS

  1. 1Entrez votre texte et ajustez la taille de la police.
  2. 2Choisissez le type de dégradé et l'angle.
  3. 3Ajoutez des arrêts de couleur et ajustez les positions.
  4. 4Copiez le CSS généré pour votre projet.
ZenovayAnalytics

Sachez ce que vos visiteurs font vraiment.

  • Suivi des visiteurs en temps réel
  • Vie privée d'abord, sans bandeau cookies
  • Installé en deux minutes
Découvrir Zenovay

Outils connexes

Générateur de gradient CSS
Créez de beaux gradients CSS avec un éditeur visuel. Gradients linéaires, radiaux et coniques.
Générateur d'Ombre de Boîte CSS
Concevez des ombres de boîte CSS avec des contrôles visuels. Ajustez le décalage, le flou, l'étalement et la couleur.
Générateur de Rayon de Bordure CSS
Créez des valeurs de rayon de bordure personnalisées avec des contrôles visuels. Liez ou dissociez les coins pour un ajustement rapide.
Zone de jeu CSS Flexbox
Apprenez et générez des mises en page CSS Flexbox visuellement. Ajustez la direction, l'alignement, l'enveloppe et l'écart en temps réel.

Questions fréquemment posées

Comment fonctionne le texte dégradé CSS ?▾
Le texte dégradé CSS utilise trois propriétés : un arrière-plan dégradé, background-clip: text pour découper l'arrière-plan à la forme du texte, et color: transparent pour rendre le remplissage du texte transparent afin que le dégradé s'affiche. Cette technique fonctionne avec n'importe quel dégradé CSS.
Quel est le support du navigateur pour le texte dégradé ?▾
background-clip: text est pris en charge dans tous les navigateurs modernes. Chrome, Edge et Safari nécessitent le préfixe -webkit- (-webkit-background-clip: text). Firefox prend en charge les deux, avec et sans préfixe. Incluez toujours les deux pour une compatibilité maximale.
Que fait background-clip: text ?▾
background-clip: text découpe l'arrière-plan de l'élément à la zone couverte par son contenu textuel. Sans cela, le dégradé remplit la boîte entière. Combiné avec une couleur de texte transparente, cela crée l'effet d'un texte rempli avec un dégradé.
Puis-je animer du texte dégradé ?▾
Oui. Utilisez une taille d'arrière-plan plus grande (par exemple, 200% 200%) et animez background-position avec @keyframes. Le dégradé glisse derrière le masque de découpe en forme de texte, créant un effet de couleur fluide. Utilisez will-change: background-position pour une animation en douceur.
Y a-t-il des problèmes d'accessibilité avec le texte dégradé ?▾
Le texte dégradé peut avoir un contraste variable par rapport à l'arrière-plan. Assurez-vous que la partie la plus sombre du dégradé respecte les ratios de contraste WCAG (4,5:1 pour le texte normal, 3:1 pour le texte volumineux). Les lecteurs d'écran lisent le texte normalement quel que soit le style visuel.