Css Text Gradient

posted on:January 17, 2008

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)

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.
cssglobe
January 17, 2008

if you put the anchor outside the text and the span you should be ok. <h2><a class="#">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.
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.
Trevor Davis
January 17, 2008

Hmm that's weird, <a class="www.webdesignerwall.com/tutorials/css-gradient-text-effect/">Web Designer Wall</a> just posted a similar article.
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...
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".
Jermayn Parker
January 18, 2008

aarrggghhhhh im over these gradients cool tip but I think its time for people to stop <a class=germworks.net/blog/2007/12/20/state-of-web-2007/">rehashing current trends</a>...
Jermayn Parker
January 18, 2008

opps the above link should not have the " in it... germworks.net/blog/2007/12/20/state-of-web-2007 sorry
An Jay
January 21, 2008

really good. Thanks for sharing it.
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?
Cleo
January 25, 2008

Hi... great tutorial! Can I to publish in portuguese in my page? I credit you. Thanks a lot.
cssglobe
January 25, 2008

Cleo, please do. This and other articles have already been translated to Spanish, German and French :)
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.
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: blog.codesignstudios.com/wp-content/uploads/2008/01/gradient-error1.png Might be a random bug though. Anyone else experience the same problem?
Dennison Uy - Graphic Designer
January 27, 2008

By the way I am using Firefox 2.
Sam Rayner
January 27, 2008

As I commented on Nick's post, I've managed to achieve the same thing without the empty span: 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. :)
s4l1h
January 27, 2008

Nice Work Thank
Cleo
January 28, 2008

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

new? inventive? tutorial? or simply stolen? www.khmerang.com/index.php?p=95
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.
chaoskaizer
February 5, 2008

nice trick, anyway the heading span is consider invalid. you try adding <h2>Lorem Ipsum <span> </span>
suraj
February 6, 2008

this do not validates the page as the span tags are empty..
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.
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?
cssglobe
March 3, 2008

Only way to fix it is use gradient that matches background color.
Martyn P
March 31, 2008

What's the license on the demo images? Am I allowed to use them on a website?
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.
Xavier
May 23, 2008

nice idea ~ Thanks !! but why must add " " ?
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?
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?
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?
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!
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.