Aunque no es totalmente compatible con todos los navegadores, hay formas de crear de forma no intrusiva gradientes de texto CSS puros con un poco de engaño. La clave es utilizar una combinación de selectores de atributos, propiedades específicas del webkit y atributos HTML personalizados..

Suscríbete a nuestra página de YouTube para ver todos los videos tutoriales.!

---

Final Simple HTML

 
 Hola Mundo 

Mediante el uso de atributos personalizados, podemos enlazar estos valores desde nuestra hoja de estilos usando el attr () función.

---

CSS final

 / * Seleccione solo h1s que contengan un atributo de 'texto de datos' * / h1 [texto de datos] posición: relativo; color rojo;  h1 [data-text] :: after content: attr (data-text); índice z: 2; color verde; posición: absoluta; izquierda: 0; -webkit-mask-image: -webkit-gradient (linear, left superior, left inferior, from (rgba (0,0,0,1)), stop de color (40%, rgba (0,0,0,0) )));

Nota: Paul hizo referencia a un método aún más conciso en los comentarios. Asegúrate de revisar eso también!