Using a 1px gradient PNG image and a solid background, you can create a snazzy gradient text effect. It looks pretty, but the real beauty is that you don’t need to cut custom titles, and the markup is simple and search friendly. The trick isn’t limited to just gradients, but can be used for a number of different patterns. As long as you have a solid background, you can overlay the text with any semi-transparent image pattern that matches the background.

CSS Gradient Text Effect