Color de texto degradado

¿Hay un generador, o una forma fácil de generar texto como este, pero sin tener que definir cada letra

Entonces algo como esto:

.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; } 
 Rainbow text 

Pero no con los colores del arco iris sino que se generan con otros colores (por ejemplo gradiente de blanco a gris / azul claro, etc.) No puedo encontrar una solución fácil para esto. Alguna solución?

No sé exactamente cómo funciona el stop . Pero tengo un ejemplo de texto degradado . ¡Tal vez esto te ayude!

_ También puede agregar más colores al degradado si lo desea o simplemente seleccionar otros colores del generador de color

 .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; } 
 Rainbow text 
No rainbow text

La forma en que funciona este efecto es muy simple. El elemento recibe un fondo que es el gradiente. Va de un color a otro dependiendo de los colores y los porcentajes de parada de color dados por él.

Por ejemplo, en una muestra de texto del arco iris (tenga en cuenta que he convertido el degradado en la syntax estándar):

  • El gradiente comienza en el color #f22 al 0% (que es el borde izquierdo del elemento). Siempre se supone que el primer color comienza en 0% , aunque el porcentaje no se menciona explícitamente.
  • Entre 0% y 14.25% , el color cambia gradualmente de #f22 a #f2f . El porcentaje se establece en 14.25 porque hay siete cambios de color y estamos buscando divisiones iguales.
  • Con un 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 porcentajes de detención de color. Cada banda debe ser un paso de 14.25% .

Entonces, terminamos obteniendo un gradiente como en el siguiente fragmento. Ahora solo esto significa 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; } 
 Rainbow text 

Puede lograr ese efecto usando una combinación de CSS linear-gradient y mix-blend-mode .

HTML

 

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!

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 hace es agregar un degradado lineal en el pseudo-elemento ::after del párrafo y hacer que cubra todo el elemento del 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 de linear-gradient para lograr lo que desea.

Ejemplo de degradado 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); } 
 

SOME TITLE