Gradiente de arco iris en texto en CSS

Solución:

Así es como puede crear un degradado lineal de arco iris básico (sin integración con el texto todavía):

#grad1 {
    height: 200px;
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); /* Standard syntax (must be last) */
}

<div id="grad1"></div>

O alternativamente, puede usar uno de los generadores de gradiente (prefiero este).

Y aquí está la integración de texto:

#grad1 {
    background: red;
    background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet);
    background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
    background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
    background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 20vw;
}

<h1 id="grad1">Fake Text</h1>

Las partes principales aquí son background-clip y text-fill-color propiedades, pero esté preparado, que no todos los navegadores lo admitirán. Para obtener más información sobre la compatibilidad del navegador, consulte las secciones con los mismos nombres cerca de la parte inferior de estas páginas:

clip de fondo

color de relleno de texto

PD
Dibujar una línea es bastante simple, solo necesita usar un degradado y definir algunos estilos para que este bloque tenga la forma correcta, por ejemplo:

#grad1 {
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); /* Standard syntax (must be last) */
}

.line {
    height: 6px;
    border-radius: 4px;
}

<div id="grad1" class="line"></div>

Si necesita el mismo degradado para el texto, use algo como esto.

    h1 {
  background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 60px;
  line-height: 60px;
}

<h1>100% Unicorn</h1>

Pero el color de relleno de texto no es compatible con Internet Explorer. Entonces, tal vez sea mejor usar png o svg transparentes en primer plano.

Tiendo a usar este generador de gradientes. Agregue colores en diferentes puntos y use la opción de rotar.

Generará el CSS por ti.

---

---

Utiliza Nuestro Buscador