Toolzi LogoToolzi

Générateur de Texte Dégradé CSS

Générez des effets de texte dégradé CSS instantanément. Personnalisez les couleurs et la direction, prévisualisez en direct et copiez le code CSS.

0%
100%

Prévisualisation

Hello World
48px

Code CSS

.gradient-text {
  background: linear-gradient(to right, #6366f1 0%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Qu'est-ce que le texte dégradé CSS ?

Le texte dégradé CSS applique un dégradé de couleur au texte en utilisant un dégradé comme arrière-plan de l'élément, puis en le découpant à la forme du texte avec background-clip: text. Cette technique crée une typographie accrocheuse sans images.

Comment appliquer un dégradé au texte en CSS

Définissez un arrière-plan dégradé sur votre élément, puis appliquez -webkit-background-clip: text et -webkit-text-fill-color: transparent. La propriété background-clip: text découpe l'arrière-plan au texte, révélant le dégradé à travers les lettres.

Compatibilité des Navigateurs

-webkit-background-clip: text est pris en charge par tous les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge. La propriété standard background-clip: text est également bien supportée. Incluez toujours les deux versions pour une couverture complète.

Questions Fréquentes

Comment créer du texte dégradé en CSS ?
Appliquez un dégradé comme arrière-plan, puis utilisez -webkit-background-clip: text et -webkit-text-fill-color: transparent pour afficher le dégradé à travers le texte.
Le texte dégradé CSS fonctionne-t-il dans tous les navigateurs ?
Oui. -webkit-background-clip: text est pris en charge par tous les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge.
Puis-je utiliser des dégradés radiaux ou coniques pour le texte ?
Oui. N'importe quel type de dégradé CSS (linear, radial, conic) peut être utilisé comme arrière-plan pour le texte dégradé.
Pourquoi ai-je besoin de -webkit-text-fill-color: transparent ?
-webkit-text-fill-color remplace la couleur du texte dans les navigateurs WebKit. En le définissant sur transparent, l'arrière-plan dégradé devient visible à travers le texte.
Puis-je animer le texte dégradé CSS ?
Oui. Vous pouvez animer background-position ou utiliser CSS @keyframes avec background-size pour créer des effets de texte dégradé animés.
Quelle est la différence entre color et -webkit-text-fill-color ?
-webkit-text-fill-color a la priorité sur color dans les navigateurs qui le supportent, permettant à l'arrière-plan dégradé de transparaître à travers le texte.

Outils Associés

CSS Gradient Generator →