Comment fonctionne le texte en dégradé en CSS ?

CSS ne possède pas de propriété « dégradé de texte ». L’astuce habituelle consiste à appliquer un dégradé à l’arrière-plan de l’élément, à découper cet arrière-plan selon la forme des lettres avec background-clip: text, puis à rendre le remplissage du texte transparent pour laisser apparaître le dégradé.

Description de l’outil

Saisissez votre texte, choisissez une couleur de début et une couleur de fin, définissez l’angle, et l’outil affiche un aperçu en temps réel ainsi que le code CSS à copier. Vous pouvez également modifier la famille de polices, la graisse et la taille, afin que l’aperçu corresponde à ce que vous utiliserez sur votre page.

La règle générée ressemble à ceci :

.gradient-text {
  background-image: linear-gradient(135deg, #f97316 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
CSS

Le résultat final inclut également les paramètres de police et les règles de retour à la ligne.

Fonctionnalités

  • Dégradé linéaire à deux couleurs avec un angle de 0 à 360 degrés
  • Paramètres de famille de polices, de graisse et de taille
  • Aperçu en temps réel exportable en image, ainsi que du code CSS prêt à copier-coller