Snippets → CSS

h2[data-text] {
	position: relative;
}
h2[data-text]::after {
	content: attr(data-text);
	z-index: 10;
	color: #e3e3e3;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));

Comments (3) - Leave yours

1. Adam Nicolson said: September 12, 2012 at 7:47 am

   would love to see this in action

   • Sara Soueidan said: April 21, 2013 at 5:25 am

     +1

     • Ult Combo said: April 21, 2013 at 1:32 pm

       Obviously it only works nicely in WebKit/Blink, I made a jsbin for it: http://jsbin.com/efugiz/1/edit