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;
}
-
text-align: center;: Centre le texte horizontalement à l'intérieur de l'élémenth1. -
color: transparent;: Rend le texte complètement transparent, le cachant initialement. -
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émenth1. -
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. -
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é !