Générateur de texte dégradé CSS - Effets de texte colorés

Générez de beaux effets de texte dégradé CSS avec un aperçu visuel en direct

Outils CSS

Tool

Text

Font Size (48px)Font Weight

Color 1

#6366f1

Color 2

#ec4899

Direction

Gradient Text

CSS

.gradient-text {
  font-size: 48px;
  font-weight: 700;
  background: linear-gradient(to right, #6366f1, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Comment utiliser

1Saisissez votre texte dans le champ de prévisualisation
2Choisissez les couleurs de début et de fin du dégradé
3Ajustez l'angle ou la direction du dégradé
4Copiez le code CSS généré et appliquez-le à votre projet

Questions fréquentes

Le texte dégradé CSS utilise la technique background-clip: text. Un dégradé est défini comme arrière-plan, puis l'arrière-plan est découpé à la forme du texte grâce à -webkit-background-clip: text et color: transparent.

Le texte dégradé est pris en charge par tous les navigateurs modernes, notamment Chrome, Firefox, Safari et Edge. Le préfixe -webkit- est toujours recommandé pour une compatibilité maximale avec les anciens navigateurs basés sur WebKit.