CSS Gradient Text Effect

Posted on Jul 15th, 2009 | 3 comments

Want to create a fancy heading without creating an image in Photoshop? Here is a simple CSS trick to create a gradient text effect with a PNG image (no javascript or Flash.) It works on most browsers and it can save you some bandwidth.

The trick is very simple. Basically we are just adding a 1px gradient PNG (with alpha transparency) over the text. This is only suitable for solid background color elements and your gradient color must be the same color as your background color.

1. First, create your PNG image. It needs to be 1px wide and if your gradient image is taller than the heading, the text will not be selectable.
2. In your html, your code for your H1 header would look like this:

<h1><span></span>Your title would go here</h1>

3. Then in your CSS, the sample code would look like this:

h1{
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}

h1 span{
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

4. For IE6, PNG doesn’t render properly, so add this hack in the <head> tags of your html:

<!–[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}
</style>

<![endif]–>

gradient_screenshot