<p><span>H</span><span>o</span><span>l</span><span>y</span> <span>F</span><span>e</span><span>t</span><span>c</span><span>h</span><span>a</span><span>m</span><span>o</span><span>l</span><span>y</span> <span>!</span></p>

<h1 id="hover">hover over us!</h1>

<h2>Sweet Molasses!</h2>

<h5>CSS3 Gradient Filled Text Strokes &amp; CSS3 Strokes On Gradient Filled Text!  &nbsp;- <em>Andrew Wilson</em> &nbsp; <a href="http://www.ballyhooblog.com">Blog</a> | <a href="http://www.studentwebhosting.com">Biz</a></h5>
  body{
    font-family:'Bubblegum Sans',Arial;
		font-weight:bold;
		background-image:url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/low_contrast_linen.png);
	}
	p{
    margin:.5em 0;
		text-align:center;
		bottom:0;
		font-size:64pt;
		
	}
	a{
		color:white;
	}
	h5{
		text-align:center;
		color:#bbb;
		font-weight:normal;
		text-shadow:-1px -1px 1px black;
		font-family:Verdana;
	}
h2{
  text-align:center;
  width:600px;
  font-size:64pt;
  margin:0 auto;
}
	span, h2{
		cursor:pointer;
		-webkit-transition-property: background;
		-webkit-transition-duration: 3s;
		-webkit-transition-timing-function: ease-out;
		color:#222;
		text-shadow:0px 0px 5px white;
		z-index:3;
		background: -webkit-linear-gradient(left,  rgba(255,0,0,1) 0%,rgba(255,255,0,1) 19%,rgba(0,255,0,1) 38%,rgba(0,255,255,1) 51%,rgba(0,0,255,1) 67%,rgba(255,0,255,1) 83%,rgba(255,0,0,1) 99%); /* Chrome10+,Safari5.1+ */
		-webkit-text-stroke: 5px rgba(255,255,255,.01);
		-webkit-background-clip: text;

	}
	span:hover{
		-webkit-transition-property: background;
		-webkit-transition-duration: 2s;
		-webkit-transition-timing-function: ease-out;
		background: -webkit-linear-gradient(right,  rgba(255,0,0,1) 0%,rgba(255,255,0,1) 19%,rgba(0,255,0,1) 38%,rgba(0,255,255,1) 51%,rgba(0,0,255,1) 67%,rgba(255,0,255,1) 83%,rgba(255,0,0,1) 99%); /* Chrome10+,Safari5.1+ */
		background-position:100px;
		-webkit-background-clip: text;
		
	}
	#hover{
		margin-top:.25em;
		text-align:center;
		font-size:64pt;
		-webkit-transition-property: background;
		-webkit-transition-duration: 3s;
		-webkit-transition-timing-function: ease-out;
		content:'studentwebhosting.com';
		-webkit-text-stroke: 3px rgba(255,255,255,1);
		background: -webkit-linear-gradient(left,  rgba(255,0,0,1) 0%,rgba(255,255,0,1) 19%,rgba(0,255,0,1) 38%,rgba(0,255,255,1) 51%,rgba(0,0,255,1) 67%,rgba(255,0,255,1) 83%,rgba(255,0,0,1) 99%); /* Chrome10+,Safari5.1+ */
		-webkit-background-clip: text;
		color:transparent;
	}
	#hover:hover{
		-webkit-transition-property: background;
		-webkit-transition-duration: 2s;
		-webkit-transition-timing-function: ease-out;
		cursor:pointer;
		-webkit-text-stroke: 3px rgba(255,255,255,1);
		background: -webkit-linear-gradient(left,  rgba(255,0,0,1) 0%,rgba(255,255,0,1) 19%,rgba(0,255,0,1) 38%,rgba(0,255,255,1) 51%,rgba(0,0,255,1) 67%,rgba(255,0,255,1) 83%,rgba(255,0,0,1) 99%); /* Chrome10+,Safari5.1+ */
		-webkit-background-clip: text;
		color:transparent;
		background-position:-500px;
	}
/*  

Host with studentwebhosting.com.  No, really.  Tell your web students! please? 

I set out to create something totally different and ended up discovering a fancy trick to apply gradient strokes to text!  

I added a few transitions for kicks as well.

Tons of possibilities here.
Needs webkit

Andrew Wilson

*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.