Css Globe is happy to present a simple trick that helps you improve your site’s appearance. With this trick you can use cool gradients on system fonts with nothing but pure css.
We use an empty span element, nested inside a heading tag. Span has transparent png set as a backgrund image and it is placed above the heading text with absolute position.

Take a look at the demo page and share your thoughts.

Take a look at the Demo
| Download TextGradient

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (33 Comments)

1. chipgrafx
   January 17, 2008

   Nice idea but what happens if the title needs to be a clickable link? The span with png background laying over top of the text prevents you from clicking it.

2. cssglobe
   January 17, 2008

   if you put the anchor outside the text and the span you should be ok. <h2><a href="#">Title<span></span></a></h2> However, both are now block level elements so you might want a little more css to adjust the widths. I will publish an update with working anchors.

3. chipgrafx
   January 17, 2008

   Ah yes. That does seem to work (I checked quickly in Firebug) but as you said the span takes on a block level 'attitude' and would require a little adjusting. Also, another potential issue would be that you can't _easily_ select the text.

4. Trevor Davis
   January 17, 2008

   Hmm that's weird, <a href="http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/">Web Designer Wall</a> just posted a similar article.

5. cssglobe
   January 17, 2008

   I already spoke to Nick and we were both surprised and amused by this... publishing an article on the same day about the same thing...

6. cssglobe
   January 17, 2008

   ...as for selecting the text... you're right, it is hard to select it, the way it is. The workaround would be decreasing the height of the span, make it high enough but not covering entire height. That way you can select the text "from bottom up".

7. Jermayn Parker
   January 18, 2008

   aarrggghhhhh im over these gradients cool tip but I think its time for people to stop <a href=http://germworks.net/blog/2007/12/20/state-of-web-2007/">rehashing current trends</a>...

8. Jermayn Parker
   January 18, 2008

   opps the above link should not have the " in it... http://germworks.net/blog/2007/12/20/state-of-web-2007 sorry

9. An Jay
   January 21, 2008

   really good. Thanks for sharing it.

10. elvisparsley
    January 25, 2008

    When I see it in Firefox, I have no problem with y in My cool site. but when I see it in IE7, y becomes v. The lower half disappears. Is it only me?

11. Cleo
    January 25, 2008

    Hi... great tutorial! Can I to publish in portuguese in my page? I credit you. Thanks a lot.

12. cssglobe
    January 25, 2008

    Cleo, please do. This and other articles have already been translated to Spanish, German and French :)

13. Bdesign
    January 26, 2008

    Count Romanian too. I'll translate it, modifiy it a little. I'll certain give credits. I like the way you gradiate the text. Thanks for sharing.

14. Dennison Uy
    January 27, 2008

    Hmm. I don't know what I did but I recall tabbing through different sites in Firefox with the demo page open and when I returned it looked like this: http://blog.codesignstudios.com/wp-content/uploads/2008/01/gradient-error1.png Might be a random bug though. Anyone else experience the same problem?

15. Dennison Uy - Graphic Designer
    January 27, 2008

    By the way I am using Firefox 2.

16. Sam Rayner
    January 27, 2008

    As I commented on Nick's post, I've managed to achieve the same thing without the empty span: http://samrayner.com/archives/span_free_gradient_text_effect/ Internet Explorer users will get just plain text with my method though so it's a trade off. Consider it an alternative. :)

17. s4l1h
    January 27, 2008

    Nice Work Thank

18. Cleo
    January 28, 2008

    Thank you a lot! I'll send you the link with the article as soon as it's done! =)

19. schnuck
    February 3, 2008

    new? inventive? tutorial? or simply stolen? http://www.khmerang.com/index.php?p=95

20. cssglobe
    February 4, 2008

    @schnuck: Stolen? Isn't it possible that some people have similar ideas? Take a look at the rest of my articles and think again before calling me a thief.

21. chaoskaizer
    February 5, 2008

    nice trick, anyway the heading span is consider invalid. you try adding <h2>Lorem Ipsum <span>&nbsp;</span>

22. suraj
    February 6, 2008

    this do not validates the page as the span tags are empty..

23. schnuck
    February 10, 2008

    people can indeed have the same ideas - however, i miss the amends to your article that states close similarities to the khmerang technique even though i have pointed you towards them. you wanna be cool? mention the coincidence.

24. tom
    March 3, 2008

    It doesn't seem to work with background color other than white. The transparent image shows up. Any way to fix this?

25. cssglobe
    March 3, 2008

    Only way to fix it is use gradient that matches background color.

26. Martyn P
    March 31, 2008

    What's the license on the demo images? Am I allowed to use them on a website?

27. Anjelina
    April 24, 2008

    Superb Tutorials. Thanks for publishing and sharing this. So far I kew that gradient can be applied only through I mage. But I saw a different things. Thanks! once again.

28. Xavier
    May 23, 2008

    nice idea ~ Thanks !! but why must add " background-image: url(none.gif); " ?

29. Jasper
    January 6, 2009

    I am trying to add this to the top right clickable title fo my Wordpress theme (See link), So far no luck. A question, why does the header one need to be relative and the span absolute?

30. Ralph Smith
    January 18, 2009

    Can gradients be done on borders? Id like to create a horizontal nav bar using divs and borders and am wondering if there is a way to gradient the background color attribute?

31. Joshua
    February 14, 2009

    I really like this idea but am having trouble getting it to work. I am very new to web design... so be gentle. Problem: The gradient png sits above my text rather than on top of it (as though it will not occupy the same space). Any ideas?

32. Eric Pender
    March 11, 2009

    If I am not mistaken, I think is works from a search engine optimization perspective as well. I have some clients who like to use Flash or just images to gain the text gradient effect. However, because the text is in HTML and is being modified by the CSS (which can be excluded from the search engines), the search engine spiders would just see the text in the header tag and index it as any other text. Great demo!

33. mog
    April 13, 2009

    I love the idea, but when you make the background color a different color other than white you can see the gradient. =(

Sorry, the comment form is closed at this time.