CSS Text Gradients
Original: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-nonintrusive-css-text-gradients/
by Alexey Demin
HTML
<h1 data-text="Hello World"> Hello World </h1>CSS
body { background: #666; }
/* Select only h1s that contain a 'data-text' attribute */
h1 {
font-size: 128px;
font-weight: bold;
font-family: sans-serif;
position: relative;
color: #a6a6a6;
text-shadow: 0 -1px 0 white;
margin: 10px;
}
h1[data-text]::after {
content: attr(data-text);
position: absolute;
left: 0;
color: white;
-webkit-mask-image: -webkit-gradient( linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(40%, rgba(0,0,0,0)), to(rgba(0,0,0,0)) );
}