In this tutorial we will go over show you how to make a cross browser friendly CSS Gradient Text Effect. We will be incorporating PNG’s and will be laying them over our text to help give the appearance of color transition. This means you will need a photo edit to create a 1px x 31px image with gradients or whatever design you want on it. We will show you three basic examples.

Css3 Gradient Text effects

White Gradient Text Effect

Let’s start by creating the markup and css for the White Gradient text.

The gradient is laid over the H1 by using an empty <span> tag and giving it a background image. This background-image is absolute positioned since it is contained within the H1 which has a relative position. We must also designate a width and height for the span in order for it to display the background image along the x-axis.

Metal Gradient Text Effect

To give the appearance of a “Glossy Matte” finish on the text, we will change the font color to white, change the gradient in our photo editor (as well as flip it) and place it against a black background.

Let’s Update the CSS

Let’s Update the HTML

We designated new CSS ID and a class that can be used for our next example. With the new ID we can switch out the white.png gradient with the metal.png we want to use now.

Stripe Gradient Text Effect

Now we are going to get creative with our overlay and show that by matching the right colors you can lay pretty much any pattern over.

Let’s Update the CSS

Let’s Update the HTML

As long as the pattern matches the background color you can place any pattern over your text and rest easy knowing that it works on most major browsers (IE6 does not accept PNG24 sorry…)

Wrapping it Up

Gradients are a great way to add dimension to your web page and add some originality. Be sure that when you use this technique that the <span> element will not overlay any other elements. This could cause your gradient image to overlap other parts of your page. Keep practicing and get creative!

Download Source Files