Textos con degradados

En ciertas ocasiones nos gustaría utilizar textos con colores degradados. Sin embargo, podemos pensar que es algo imposible de realizar, puesto que la propiedad color para dar color a un texto no soporta gradientes. Aunque esto es cierto, existen algunos «trucos» para conseguir textos con gradientes.

Creando textos con gradiente

Vamos a empezar por crear un pequeño fragmento de código CSS donde establecemos una tipografía, con un grosor bold y un tamaño concreto. Además, colocamos un degradado de fondo y un color de texto blanco:

body {
  background: #111;
}

.text {
  font-family: Jost, sans-serif;
  font-weight: bold;
  font-size: 4rem;
  background-image: linear-gradient(indigo, hotpink);
  color: white;
}

<div class="text">Esto es un texto de ejemplo.</div>

¡Un momento, Manz! Me has estafado. ¡No era esto lo que yo quería con «Texto con degradado». No te preocupes, esto es sólo un primer paso para hacer lo que buscas, en las siguientes líneas lo modificaremos.

La propiedad `background-clip`

Existe una propiedad algo desconocida denominada background-clip. La mencionamos más en detalle en el post sobre la propiedad background-image y relacionadas. Sin embargo, esta propiedad, tiene un valor text no estándar, que viene muy bien para casos como este.

Observa que en el ejemplo anterior, hemos añadido el background-clip: text y parece que deja de funcionar el background-image:

body {
  background: #111;
  color: white;
}

.text {
  font-family: Jost, sans-serif;
  font-weight: bold;
  font-size: 4rem;
  background-image: linear-gradient(indigo, hotpink);
  background-clip: text;
  color: white;
}

const select = document.querySelector("select");
const text = document.querySelector(".text");
select.addEventListener("input", () => {
  const selected = select.querySelector("option:checked");
  text.style.color = selected.value;
});

<p>
  Propiedad <code>color</code>:
  <select>
    <option>white</option>
    <option>transparent</option>
    <option>#fff5</option>
  </select>
</p>
<div class="text">Esto es un texto de ejemplo.</div>

Sin embargo, lo que está ocurriendo es que background-clip: text está indicando al navegador, que recorte el fondo justo con el contorno del texto. Lo que ocurre, es que, como tenemos el color de texto en blanco, tapa este recorte y parece que ha inhabilitado el fondo, que en realidad se sigue efectuando.

Si cambiamos el valor de color a transparent o algún valor con canal alfa o transparencia, veremos el gradiente de fondo.

► Más sobre la propiedad background-clip.

La propiedad `-webkit-text-fill-color`

Hay que saber que el color: transparent con el background-clip: text puede que no funcione bien en algunos navegadores, por lo que suele ser más seguro utilizar la propiedad -webkit-text-fill-color.

Esta propiedad no es una propiedad estándar, sin embargo, está bien soportada en los navegadores actuales y se puede utilizar para conseguir el mismo efecto anterior, pero con mayor grado de compatibilidad.

Observa el siguiente ejemplo:

body {
  background: #111;
}

.text {
  font-family: Jost, sans-serif;
  font-weight: bold;
  font-size: 3rem;
  background: linear-gradient(indigo 50%, hotpink 75%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class="text">Visita Manz.dev, tu streamer preferido.</div>

Como puedes ver, se sigue observando el gradiente sin necesidad de usar color: transparent. Además, hemos modificado el gradiente añadiendole puntos de parada. Recuerda que puedes utilizar otros tipos de gradiente, como radial o cónico, y utilizar propiedades que los modifiquen.

Crear textos con bordes gradientes

De la misma forma que hemos visto hasta ahora, podemos utilizar la propiedad -webkit-text-stroke que explicamos en el artículo contorno en tipografías. Esta propiedad hace lo mismo que -webkit-text-fill-color, pero en lugar de con el relleno, con el borde.

Esto nos permitiría establecer un color: white en nuestro texto, pero luego, con -webkit-text-stroke volver transparente el borde o contorno del texto y que se refleje el gradiente que tenemos de fondo:

body {
  background: #111;
}

.text {
  font-family: Jost, sans-serif;
  font-weight: bold;
  font-size: 4rem;
  background: linear-gradient(indigo, hotpink, white);
  background-clip: text;
  color: white;
  -webkit-text-stroke: 8px transparent;
}

<div class="text">Visita la web Manz.dev</div>

Recuerda que ciertas propiedades que hemos mencionado no son estándar, por lo que hay que incluir el prefijo -webkit en dichas propiedades.

Crear textos con imagen

Si ya has trabajado con imágenes y gradientes en CSS, como te habrás imaginado, igual que utilizamos gradientes podemos utilizar imágenes, por lo que también podríamos crear un texto que en lugar de un degradado utilice una imagen.

Observa este ejemplo. Simplemente hemos cambiado el background-image por una imagen, en lugar de utilizar un gradiente:

body {
  background: #111;
}

.text {
  font-family: Jost, sans-serif;
  font-weight: bold;
  font-size: 8rem;
  background-image: url("gato.jpg");
  background-size: 50%;
  background-position: 25% 15%;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class="text">Manz.dev</div>

Crear textos con gradientes animados

Y como habrás podido imaginar, también podemos animar los gradientes si queremos conseguir algún efecto un poco más llamativo. Para ello, creamos una animación CSS, y posteriormente, le damos un tipo a la variable CSS --angle, para que el navegador sepa como debe crear su animación:

body {
  background: #111;
}

.text {
  font-family: Jost, sans-serif;
  font-weight: bold;
  font-size: 4rem;
  background-image: linear-gradient(var(--angle), hotpink, indigo);
  background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: move 4s linear alternate infinite;
}

@keyframes move {
  0% { --angle: 0.25turn }
  100% { --angle: 0.75turn }
}

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0turn;
}