css - online - Color de texto degradado

text gradient css

Question

¿Existe un generador o una forma fácil de generar texto como this 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;
}

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

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

Answer 1

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 que se le dan.

Por ejemplo, en la muestra de texto del arco iris (tenga en cuenta que he convertido el gradiente en la sintaxis 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 de #f22 a #f2f gradualmente. El porcentaje se establece en 14.25 porque hay siete cambios de color y estamos buscando divisiones iguales.
• A 14.25% (del tamaño del contenedor), el color será exactamente #f2f según el gradiente especificado.
• Del mismo modo, 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 del 14.25% .

Entonces, terminamos obteniendo un gradiente como en el fragmento de abajo. Ahora, 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>

Como el gradiente debe aplicarse solo al texto y no al elemento en su conjunto, debemos indicarle 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 una propiedad experimental y no se admite ampliamente ) .

Ahora, si desea que el texto tenga un gradiente simple de 3 colores (es decir, de rojo - naranja - marrón), solo tenemos que 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, entonces use la dirección to right . Si debe ser rojo a la derecha y marrón a la izquierda, indique la dirección to left .
• El siguiente paso es definir los colores del gradiente. Dado que nuestro gradiente debe comenzar como rojo en el lado izquierdo, solo especifique el red como el primer color (se supone que el porcentaje es 0%).
• Ahora, dado 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.
• Entonces, al 50% el color debería ser orange y luego el color final sería brown . Siempre se supone que la posición del color final es del 100%.

Por lo tanto, la especificación del gradiente debería leerse como sigue:

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

Si formamos los gradientes 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>

Answer 2

No sé exactamente cómo funcionan las cosas de parada . Pero tengo un ejemplo de texto degradado . ¡Quizás esto te ayude!

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

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

Puede lograr ese efecto utilizando una combinación de linear-gradient CSS y modo de 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 ::after del párrafo y hacer que cubra todo el elemento del párrafo. Pero con el modo mix-blend-mode: screen , el gradiente 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.

Answer 4

  .gradient_text_class{
      font-size: 72px;
      background: linear-gradient(to right, #ffff00 0%, #0000FF 30%);
      background-image: linear-gradient(to right, #ffff00 0%, #0000FF 30%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

<div class="gradient_text_class">Hello</div>

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>

Answer 6

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