Couleur du texte dégradé

La façon dont cet effet fonctionne est très simple. L'élément reçoit un arrière-plan qui est le dégradé. Il va d'une couleur à l'autre en fonction des couleurs et des pourcentages d'arrêt de couleur donnés pour cela.

Par exemple, dans rainbow text sample (notez que j'ai converti le dégradé en syntaxe standard):

• Le dégradé commence à couleur #f22 à 0% (qui est le bord gauche de l'élément). La première couleur est toujours supposée commencer à 0% même si le pourcentage n'est pas mentionné explicitement.
• entre 0% et 14.25%, la couleur passe progressivement de #f22 à #f2f. Le percenatge est fixé à 14.25 car il y a sept changements de couleur et nous recherchons des scissions égales.
• à 14.25% (de la taille du conteneur), la couleur sera exactement #f2f selon le dégradé spécifié.
• de même les couleurs changent d'une à l'autre en fonction des bandes spécifiées par les pourcentages d'arrêt de couleur. Chaque bande devrait être une étape de 14.25%.

Donc, nous finissons par obtenir un dégradé comme dans l'extrait ci-dessous. Maintenant seul, cela signifierait l'arrière-plan s'applique à l'ensemble de l'élément, et pas seulement le texte.

.rainbow {
  background-image: linear-gradient(to right, #f22, #f2f 14.25%, #22f 28.5%, #2ff 42.75%, #2f2 57%, #2f2 71.25%, #ff2 85.5%, #f22);
  color: transparent;
}

<span class="rainbow">Rainbow text</span>

Étant donné que le dégradé doit être appliqué uniquement au texte et non à l'élément dans son ensemble, nous devons demander au navigateur de couper l'arrière-plan des zones en dehors du texte. Ceci est fait en définissant background-clip: text.

(Notez que le background-clip: text est un propriété expérimentale et n'est pas largement supporté.)

Maintenant, si vous voulez que le texte ait un simple dégradé de 3 couleurs (c'est-à-dire du rouge-orange-brun), il suffit de changer la spécification de gradient linéaire comme suit:

• le premier paramètre est la direction du gradient. Si la couleur doit être rouge sur le côté gauche et marron sur le côté droit, utilisez la direction to right. Si elle doit être rouge à droite et marron à gauche alors donnez la direction comme to left.
• l'étape suivante consiste à définir les couleurs du dégradé. Puisque notre dégradé devrait commencer en rouge sur le côté gauche, spécifiez simplement red comme première couleur (le pourcentage est supposé être de 0%).
• maintenant, puisque nous avons deux changements de couleur (rouge-orange et orange - brun), les pourcentages doivent être définis comme 100 / 2 pour des scissions égales. Si des scissions égales ne sont pas requises, nous pouvons attribuer les pourcentages comme nous le souhaitons.
• , de Sorte à 50% la couleur doit être orange, puis la couleur finale serait brown. La position de la couleur finale est toujours supposée être à 100%.

Ainsi, la spécification du gradient devrait se lire comme suit:

background-image: linear-gradient(to right, red, orange 50%, brown).

Si nous formons les gradients en utilisant la méthode mentionnée ci-dessus et les appliquons à l'élément, nous pouvons obtenir l'effet requis.

.red-orange-brown {
  background-image: linear-gradient(to right, red, orange 50%, brown);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.green-yellowgreen-yellow-gold {
  background-image: linear-gradient(to right, green, yellowgreen 33%, yellow 66%, gold);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<span class="red-orange-brown">Red to Orange to Brown</span>

<br>

<span class="green-yellowgreen-yellow-gold">Green to Yellow-green to Yellow to Gold</span>

Vous pouvez obtenir cet effet en utilisant une combinaison de CSS linear-gradient et mélange de mélange de la mode-.

HTML

<p>
    Enter your message here... 
    To be or not to be, 
    that is the question...
    maybe, I think, 
    I'm not sure
    wait, you're still reading this?
    Type a good message already!
</p>

CSS

p {
    width: 300px;
    position: relative;
}

p::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, red, orange, yellow, green, blue, purple);
    mix-blend-mode: screen;
}

Ce que cela fait est d'ajouter un gradient linéaire sur le pseudo-élément ::after du paragraphe et de le faire couvrir l'ensemble de l'élément de paragraphe. Mais avec mix-blend-mode: screen, le dégradé ne s'affichera que sur les parties où il y a du texte.

Voici un jsfiddle pour afficher au travail. Modifiez simplement les valeurs linear-gradient pour réalisez ce que vous voulez.

Exemple de dégradé de texte CSS

background-image: -moz-linear-gradient(top,#E605C1 0%,#3B113B 100%);
background-image: -webkit-linear-gradient(top,#E605C1 0%,#3B113B 100%);
background-image: -o-linear-gradient(top,#E605C1 0%,#3B113B 100%);
background-image: -ms-linear-gradient(top,#E605C1 0%,#3B113B 100%);
background-image: linear-gradient(top,#E605C1 0%,#3B113B 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position:relative;
display:inline-block; /*required*/

Générateur en Ligne textgradient.com

body{ background:#3F5261; text-align:center; font-family:Arial; } 

h1 {
  font-size:3em;
  background: -webkit-linear-gradient(top, gold, white);
  background: linear-gradient(top, gold, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  position:relative;
  margin:0;
  z-index:1;

}

div{ display:inline-block; position:relative; }
div::before{ 
   content:attr(data-title); 
   font-size:3em;
   font-weight:bold;
   position:absolute;
   top:0; left:0;
   z-index:-1;
   color:black;
   z-index:1;
   filter:blur(5px);
} 

<div data-title='SOME TITLE'>
  <h1>SOME TITLE</h1>
</div>