Css Text Gradient

written on:17 Jan, 2008 by Alen Grakalic

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

TextGradient samples

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

About the author

Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of Easy front-end framework.
To get in touch, visit Alen's personal page, follow Alen on Twitter or become a Facebook friend.

Enjoyed the article?

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

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

Comments

chipgrafx 17 Jan, 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 17 Jan, 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.
chipgrafx 17 Jan, 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 17 Jan, 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.
cssglobe 17 Jan, 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 17 Jan, 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 18 Jan, 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>...
Jermayn Parker 18 Jan, 2008

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

sorry
An Jay 21 Jan, 2008

really good. Thanks for sharing it.
elvisparsley 25 Jan, 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 25 Jan, 2008

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

Thanks a lot.
cssglobe 25 Jan, 2008

Cleo, please do. This and other articles have already been translated to Spanish, German and French :)
Bdesign 26 Jan, 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 27 Jan, 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?
Dennison Uy - Graphic Designer 27 Jan, 2008

By the way I am using Firefox 2.
Sam Rayner 27 Jan, 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. :)
s4l1h 27 Jan, 2008

Nice Work Thank
Cleo 28 Jan, 2008

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

=)
schnuck 3 Feb, 2008

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

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

this do not validates the page as the span tags are empty..
schnuck 10 Feb, 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 3 Mar, 2008

It doesn't seem to work with background color other than white.

The transparent image shows up. Any way to fix this?
cssglobe 3 Mar, 2008

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

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

nice idea ~ Thanks !!
but why must add " background-image: url(none.gif); " ?
Jasper 6 Jan, 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 18 Jan, 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 14 Feb, 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 11 Mar, 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 13 Apr, 2009

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

Sorry, further comments are disabled for this post.

CSS Globe is a web design magazine brought to you by Alen Grakalic and kept fresh with member contributed news and exlusive articles.

Css Globe CSS and Web Design News