Couleur de texte dégradée

Question

Existe-t-il un générateur, ou un moyen simple de générer un texte du type ce mais sans avoir à définir chaque lettre

Donc quelque chose comme ça :

.rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

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

Mais pas avec arc-en-ciel mais génèrent d'autres couleurs (par exemple, un dégradé de blanc à gris/bleu clair, etc.) Je n'arrive pas à trouver une solution simple pour cela. Des solutions ?

Answer 1

Je ne sais pas exactement comment le arrêter les choses fonctionnent. Mais j'ai un texte en dégradé exemple. Peut-être que cela vous aidera !

Vous pouvez également ajouter d'autres couleurs au gradient si vous le souhaitez ou simplement sélectionner d'autres couleurs dans le menu déroulant. générateur de couleurs

.rainbow2 {
    background-image: -webkit-linear-gradient(left, #E0F8F7, #585858, #fff); /* For Chrome and Safari */
    background-image:    -moz-linear-gradient(left, #E0F8F7, #585858, #fff); /* For old Fx (3.6 to 15) */
    background-image:     -ms-linear-gradient(left, #E0F8F7, #585858, #fff); /* For pre-releases of IE 10*/
    background-image:      -o-linear-gradient(left, #E0F8F7, #585858, #fff); /* For old Opera (11.1 to 12.0) */
    background-image:         linear-gradient(to right, #E0F8F7, #585858, #fff); /* Standard syntax; must be last */
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
.rainbow {

  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<span class="rainbow">Rainbow text</span>
<br />
<span class="rainbow2">No rainbow text</span>

Answer 2

Le fonctionnement de cet effet est très simple. L'élément reçoit un arrière-plan qui est le gradient. Il passe d'une couleur à l'autre en fonction des couleurs et des pourcentages d'arrêt de couleur qui lui sont attribués.

Par exemple, dans l'échantillon de texte de l'arc-en-ciel (notez que j'ai converti le gradient dans la syntaxe standard) :

• Le gradient commence à la couleur #f22 sur 0% (c'est-à-dire 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% à 14.25% la couleur passe de #f22 à #f2f progressivement. Le pourcenatge est fixé à 14.25 parce qu'il y a sept changements de couleur et que nous cherchons à obtenir des parts égales.
• Sur 14.25% (de la taille du conteneur), la couleur sera exactement #f2f selon le gradient spécifié.
• De même, les couleurs passent de l'une à l'autre en fonction des bandes spécifiées par les pourcentages d'arrêt des couleurs. Chaque bande doit être un échelon de 14.25% .

Ainsi, nous obtenons un gradient comme dans le snippet ci-dessous. Cela signifie que l'arrière-plan s'applique à l'ensemble de l'élément et pas seulement au 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é ne doit être appliqué qu'au texte et non à l'élément dans son ensemble, nous devons demander au navigateur d'écrêter l'arrière-plan des zones situées en dehors du texte. Pour ce faire, il faut définir background-clip: text .

( Notez que le background-clip: text est une propriété expérimentale et n'est pas supportée à grande échelle. )

---

Maintenant, si vous voulez que le texte ait un simple dégradé de 3 couleurs (c'est-à-dire rouge - orange - marron), il suffit de modifier la spécification du dégradé 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 suivante to right . Si elle doit être rouge à droite et brune à gauche, donnez la direction comme suit to left .
• L'étape suivante consiste à définir les couleurs du dégradé. Puisque notre gradient doit commencer en rouge sur le côté gauche, il suffit de spécifier red comme première couleur (le pourcentage est supposé être de 0 %).
• Maintenant, puisque nous avons deux changements de couleur (rouge - orange et orange - marron), les pourcentages doivent être définis comme 100 / 2 pour des divisions égales. Si des répartitions égales ne sont pas nécessaires, nous pouvons attribuer les pourcentages comme nous le souhaitons.
• Alors à 50% la couleur devrait être orange et 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 dégradés à l'aide de la méthode mentionnée ci-dessus et que nous les appliquons à l'élément, nous pouvons obtenir l'effet souhaité.

.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>

Answer 3

Vous pouvez obtenir cet effet en utilisant une combinaison de CSS dégradé linéaire et mode mixte .

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, c'est d'ajouter un gradient linéaire sur l'image du paragraphe. ::after et faire en sorte qu'il couvre l'ensemble de l'élément de paragraphe. Mais avec mix-blend-mode: screen le dégradé n'apparaîtra que sur les parties où il y a du texte.

Voici un jsfiddle pour montrer cela au travail. Il suffit de modifier le linear-gradient valeurs pour obtenir ce que vous voulez.

Answer 4

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

Answer 5

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>