Degradado color del texto

La forma en que funciona este efecto es muy simple. Al elemento se le da un fondo que es el gradiente. Va de un color a otro dependiendo de los colores y los porcentajes de parada de color dados para él.

Por ejemplo, en rainbow text sample (tenga en cuenta que he convertido el gradiente en la sintaxis estándar):

• El gradiente comienza en color #f22 en 0% (que es el borde izquierdo del elemento). El primer color siempre se asume que comienza en 0% a pesar de que el el porcentaje no se menciona explícitamente.
• Entre 0% y 14.25%, el color cambia de #f22 a #f2f gradualmente. El percentatge se establece en 14.25 porque hay siete cambios de color y estamos buscando divisiones iguales.
• En 14.25% (del tamaño del contenedor), el color será exactamente #f2f según el gradiente especificado.
• De manera similar, los colores cambian de uno a otro dependiendo de las bandas especificadas por los porcentajes de parada de color. Cada banda debe ser un paso de 14.25%.

Por lo tanto, terminamos obteniendo un degradado como en el fragmento de código siguiente. Ahora bien, esto solo significaría que el fondo se aplica a todo el elemento y no solo al texto.

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

Dado que el degradado solo debe aplicarse al texto y no al elemento en su conjunto, debemos indicar al navegador que recorte el fondo de las áreas fuera del texto. Esto se hace configurando background-clip: text.

(tenga en cuenta que el background-clip: text es un propiedad experimental y no está ampliamente soportado.)

Ahora, si desea que el texto tenga un gradiente de color simple de 3 (es decir, de rojo-naranja-marrón), solo necesitamos cambiar la especificación de gradiente lineal de la siguiente manera:

• El primer parámetro es la dirección del gradiente. Si el color debe ser rojo en el lado izquierdo y marrón en el lado derecho, use la dirección como to right. Si debe ser rojo a la derecha y marrón a la izquierda entonces dar la dirección como to left.
• el Siguiente paso es definir los colores del degradado. Dado que nuestro gradiente debe comenzar como rojo en el lado izquierdo, solo especifique red como el primer color (se asume que el porcentaje es 0%).
• Ahora, ya que tenemos dos cambios de color (rojo - naranja y naranja - marrón), los porcentajes deben establecerse como 100 / 2 para divisiones iguales. Si no se requieren divisiones iguales, podemos asignar los porcentajes como queramos.
• Así que en 50% el color debe ser orange y luego el color final sería brown. La posición del color final siempre se asume que es al 100%.

Por lo tanto, la especificación del gradiente debe decir lo siguiente:

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

Si formamos los degradados utilizando el método mencionado anteriormente y los aplicamos al elemento, podemos obtener el efecto requerido.

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

Puede lograr ese efecto usando una combinación de CSS lineal-gradiente y mix-blend-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;
}

Lo que esto hace es agregar un gradiente lineal en el pseudo-elemento del párrafo ::after y hacer que cubra todo el elemento de párrafo. Pero con mix-blend-mode: screen, el degradado solo se mostrará en las partes donde hay texto.

Aquí hay un jsfiddle para mostrar esto en el trabajo. Simplemente modifique los valores linear-gradient para logra lo que quieres.

Ejemplo de Gradiente de Texto 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*/

Generador en Línea 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>