Cómo hacer texto degradado con CSS

Paso 1: Agregar un degradado de fondo

Selecciona tu elemento de texto (en mi caso es un H1), y agrégale un fondo degradado de esta forma:

h1 {
  font-size: 100px;
  background-image: linear-gradient(to right, #f4e784, #f24389, #a478f1);
}
Code language: CSS (css)

Si quieres personalizar estos degradados ve a la documentación de mozilla sobre degradados.

Problemas con degradados horizontales

Los colores que tomará el texto son los colores que cubre el texto (léelo de nuevo).

Ocurre 2 problemas cuando un degradado va de forma horizontal y el fondo abarca el 100% de ancho. Primero que el texto es muy pequeño y no esta cubriendo los los 3 colores del degradado. Segundo, si redimensionas la pantalla, el degradado se moverá y cambiarán los colores que cubre el texto. Por ello, es necesario agregar inline-block, para que el fondo encaje con el texto. Esto no será necesario en etiquetas que no abarcan el ancho completo como el span y degradados que son verticales.

h1 {
  font-size: 100px;
  background-image: linear-gradient(to right, #f4e784, #f24389, #a478f1);
  display: inline-block;
}
Code language: CSS (css)

Paso 2: Recortar el fondo con el área del texto

Agrega la siguiente línea de código:

h1 {
  font-size: 100px;
  background-image: linear-gradient(to right, #f4e784, #f24389, #a478f1);
  display: inline-block;
  background-clip: text;
}
Code language: CSS (css)

Esta propiedad indica que el fondo solo se muestra donde el texto está presente. Es decir, el fondo se recorta para que solo sea visible detrás del texto y no se extienda más allá de los límites del texto.

Paso 3: Hacer que el texto sea transparente

Parece como si el gradiente desapareció, pero esta ahí, detrás del texto, agrega una transparencia al texto para poder apreciar el fondo degradado.

h1 {
  font-size: 100px;
  background-image: linear-gradient(to right, #f4e784, #f24389, #a478f1);
  display: inline-block;
  background-clip: text;
  color: transparent;
}
Code language: CSS (css)

¡Gracias por leer!.