source : https://www.gerits-aurelien.be/fr/pages/11-creer-un-texte-en-degrade-avec-css/

La technique de fond dégradé dans le texte est rendue possible grâce aux propriétés color: transparent; et background-clip: text;. Le dégradé lui-même est défini avec background-image: linear-gradient(60deg, #E21143, #FFB03A);.

h1 {
			text-align: center;
			color: transparent;
			background-image: linear-gradient(60deg, #E21143, #FFB03A);
			background-clip: text;
			padding-bottom: .2rem;
		}

 

  1. text-align: center;: Centre le texte horizontalement à l'intérieur de l'élément h1.

  2. color: transparent;: Rend le texte complètement transparent, le cachant initialement.

  3. background-image: linear-gradient(60deg, #E21143, #FFB03A);: Crée un dégradé linéaire incliné de 60 degrés, allant de la couleur #E21143 à la couleur #FFB03A. Cela devient le fond de l'élément h1.

  4. background-clip: text;: Spécifie que le fond (dégradé) doit être limité à la zone occupée par le texte, créant l'effet de dégradé de texte.

  5. padding-bottom: .2rem;: Ajoute un léger espace sous le texte pour améliorer l'apparence et l'espace visuel autour du texte dégradé.

Ces ajustements contribuent à centrer le texte et à maintenir l'effet de dégradé de manière élégante.

Vous avez une belle solution pour un titre dégradé centré !