CSS Text Gradients

What is it?

Text Gradient is a simple css trick that allows you to improve your site's appearance by putting gradients on system font titles using nothing but css and a png image.

It works? Really?

Sure it does! Try it yourself, change the above title by typing your own words in the field below.

Type to change text of the title above

How does it work?

The trick is very simple. Text Grannt in png should start with your background color (in this case we use white gradient).
First the html set up. Each title (preferably heading tag) uses additional empty nested span element.
The code looks like this:

<h2>My Cool Title<span></span></h2>

Use the css to define styiling of the H2. You really don/t have to follow the styling in this example. Use your own. The only important thing is to make sure that you set position property to relative;.

h2 {
	/* optional styling, you can use whatever you wish */
	font-size:220%;
	color:#0079b6;
	font-weight:normal;
	letter-spacing:-.05em;
	margin:.6em 0;
	/* now, this is important */
	position:relative;	
}

Now the gradient.
We put a transparent png as a background image for the span element and set position property to absolute so it can go above the text.

h2 span{
	position:absolute;
	display:block;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background:url(gradient_1.png) repeat-x;
}

Unfortunately, we don't live in a perfect world and not all browsers support png transparency. So for those browsers, please include this as well.

* html h2 span{
	background-color:#fff;
	back\ground-color:transparent;
	background-image: url(none.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient_1.png", sizingMethod="scale");
}

So, the empty span goes above the title and it is stretched accross entire width and height. Since the gradient includes title's background color it will not be visible in the gaps between the letters, making the effect real.

Any thoughts and comments you can post here.