CSS es un lenguaje muy flexible que permite estilizar el texto de forma muy imaginativa. Si bien con la propiedad color podemos asignar un color al texto, colorearlo con un degradado requiere algunas reglas más.

Concretamente, para cubrir el texto con un degradado, necesitamos definir tres propiedades CSS:

• background-image: <color degradado>
• background-clip: text
• text-fill-color: transparent

Ejemplo

Definimos el HTML añadiendo una clase CSS al elemento que contiene el texto:

<h1 class="degradado">Texto de color degradado</h1>

.degradado {
  background-image: linear-gradient(119deg, #e11f39, #7128dd);
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

• background-image: Definimos un degradado lineal indicando la inclinación y los colores inicial y final del gradiente.
• background-clip: text: Esta propiedad sólo hace que se renderize el fondo donde está el texto. Si sólo añades esta propiedad parecerá que el degradado ha desaparecido completamente, pero en realidad es el color del texto que está una capa por encima.
• -webkit-text-fill-color -moz-text-fill-color: asignamos esta propiedad el color transparente para indicar que elimine el color de relleno del texto, haciendo que se vea el degradado de nuevo.

Demo

Observa el texto con un color gradiente:

Soporte de navegadores

Si te fijas hemos añadido en la propiedad de text-fill-color el prefijo -webkit y -moz. Esto es porque no es una propiedad estándar y hay que definirla para cada tipo de navegador.