Gradient Text Cross-Browser Compliant

HTML

<h1>
<svg>
<defs>
	<pattern id="rainbow" patternUnits="userSpaceOnUse" width="400" height="400" >
		<image xlink:href="http://img1.wikia.nocookie.net/__cb20130224165510/clubpenguin/images/9/9b/Rainbow_to_alpha_gradient.png" width="400" height="400" />
	</pattern>
</defs>
<text y="1.2em">
SVG rocks!
</text>
</svg></h1>

CSS

svg {
	width: 6em; height: 1.5em;
	font: 900 500%/1.2 'Arial Black', sans-serif;
}

text { fill: url(#rainbow); }