Though not completely cross browser compatible, there are ways to nonintrusively create pure CSS text-gradients with a bit of trickery. The key is to use a mix of attribute selectors, webkit-specific properties, and custom HTML attributes.

Final Simple HTML

 Hello World 

By using custom attributes, we can then hook into these values from within our stylesheet by using the attr() function.

Final CSS

/* Select only h1s that contain a 'data-text' attribute */h1[data-text] {position: relative;        color: red;}h1[data-text]::after {content: attr(data-text);z-index: 2;color: green;position: absolute;left: 0;-webkit-mask-image: -webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,1)),color-stop(40%, rgba(0,0,0,0)));