Apply a gradient effect to html text using CSS

Oh yes, your web html text can have a gradient applied upon it! It can be done using a very simple technique, no javascript or flash required. It will work in all major browsers (We will just use the IE6 CSS PNG fix - easy hack).

What are we going to do? Please refer to the image below:

How is this achieved?
Simply by adding a span element in our paragraphs and headings. Well, if we are going to use this in a paragraph which will normally contain a lot of words, it won’t be readable, so in this tutorial we will focus just on headings.

How can we apply the gradient?

First, we need to use a very simple html markup

<h1><span></span>Our heading</h1>

And apply a 1 pixel wide gradient background (with alpha transparency) on the span. Remember, the gradient color must be the same as the background in order this to work.

The css markup (The key is placing position:relative; on the heading, and position:absolute; on the span which is located inside the heading)

h1 {
font:24px Verdana bold italic;
color:#000;
position:relative;
line-height:30px;
}

h1 span {
width:100%;
position:absolute;
background:url(path-to-gradient.png) repeat-x;
height:30px;
}

A live example:

How to make it work for ie6?

We will need to use the microsoft alpha loader hack. In the head section of your html page, type in the following code

<!--[if lt IE 7]>

<style>
h1 span {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path-to-gradient.png', sizingMethod='scale');
}
</style>

<![endif]-->

If you can find a good use of the source files, download them from here!