Quick Tip: Pure CSS Text Gradients
Tutorial Details
- Technology: CSS
- Difficulty: Moderate
- Estimated Completion Time: 4 Minutes
With the latest advancements in CSS, we now have access to powerful styling techniques, including box shadows, rounded corners, background gradients, etc. However, we don’t currently have the ability to apply gradients to the text itself. Luckily, with a bit of trickery, we can force this effect — at least in webkit browsers! I’ll show you how in today’s video quick tip.
4 Minutes: Video Tutorial
Subscribe to our YouTube page to watch all of the video tutorials!
Prefer to watch this video on Screenr?
Final Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Text Gradients</title>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style>
body {
background: #292929;
padding: 1em;
}
h1 {
position: relative;
font-size: 70px;
margin-top: 0;
font-family: 'Lobster', helvetica, arial;
}
h1 a {
text-decoration: none;
color: #666;
position: absolute;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
}
h1:after {
content : 'Hello World';
color: #d6d6d6;
text-shadow: 0 1px 0 white;
}
</style>
</head>
<body>
<h1> <a href="#"> Hello World </a> </h1>
</body>
</html>
I originally learned this technique from the guys over at NiceWebType.com. Be sure to visit their website to learn more! So what do you think?
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Cool, but what’s up with the tail of the “d” in “Hello World”? It doesn’t appear to get the gradient. I assume that’s an issue with the Lobster font?
Yeah – that confused me too. It must be an issue with the Lobster font. That’s all I can imagine. :)
I’ve noticed a plethora of issues with many of the Google-hosted fonts on Windows, I’m disappointed to see that some of the problems are cross-browser, though. Oh well, can’t complain too much about free fonts, I suppose :)
If you add the following to push the image-mask out a little so it covers the full width of the text:
h1 a { padding-right: 15px; }
The “d” right end is out of the text block, and I believe only that gets coloured. Check the demo under IE and click the text to see the bounding box outline (webkit won’t render the outline, and FF extends the block to contain the whole text).
Great Quick Tip…and of course I see you’re using the new Google Fonts API :)
Question…is it me or does the demo look a little jaggity along the edge of the font? I haven’t watched the video yet so maybe you explain that in there.
That’s an inherent issue with the Google Font API on Windows.
I’m on a Mac
Try changing the text shadow to 0px 1px 1px seems to fix the issue on my computer must be something with google font api
Hopefully Firefox adds this in Firefox 4.
very good post thanks a lot
Nice tutorial, thanks to share.
Unusual, Google Font API doesn’t seem to work with Chrome, might just be me. Gradient Works but no font change.
Actually doesn’t matter!
Restarted Chrome and it worked
Hey Jeffrey, beautiful tut, I really liked it.
The gradient is getting cut off on the tail of the “d”. Any way to fix that?
The Demo doesn’t seem to work for me. There is no gradient at all.
using the latest version of Firefox.
Right – This is for Webkit — meaning Chrome and Safari.
Wonder if there is a clever cross-browser solution…
Nice, wonder when Firefox will implement this feature. I’m assuming IE9 will have it aswell.
First!, that was great.
what a nice and cooool use of CSS 3.0 , our life is getting more and more easier , ^_^ CSS3 ROCKS!!
Why not use text-shadow instead of positioning some other text underneath?
I couldn’t get that to work.
Actually it’s working fine with text shadow: http://demo.kucrut.org/mxt/ (contains spoler! :))
Not bad but, seems a little browser-limited at this time :P
Doesn’t work in FF/IE7/IE8 and looks crappy in Chrome 4.1
Yeah, it didn’t look like your preview in any of my browswers: Chrome, Firefox, IE, Safari.
What browser were you using?
Excellent tip
I am liking the Google Fonts a as well, but i find if you use the loader before your own CSS file calls, it wipes them out. No styling at all. (codeigniter)
And I like the fact you made it very subtle
Loving the power of CSS3! Great stuff again Jeffrey!
What’s the point of showing a tutorial for a method that only works in one browser (a browser with a low user base I might add)?
I really like the way the tutorial is presented but the title should not give the impression that this is a general CSS technique if it only covers ONE BROWSER.
Compared to your last CSS post (the one with the CSS3 twitter button) .
This post looks like you just spat out a “quick tutorial” for the sake of publishing a tutorial.
The title of this post should be changed from:
“Quick Tip: Pure CSS Text Gradients”
To:
“Quick Tip: Pure CSS Text Gradients in Webkit”
Doesnt webkit include both chrome and safari?
Actually, it works in all webkit browsers. This includes Safari and Chrome, which is rapidly gaining in popularity. It’s an enhancement, nothing more. There’s nothing wrong with including it, because it defaults to a solid color in non Webkit browsers.
P.S. I don’t believe that’s your real name.
The idea is to show progressive enhancements, to show whats possible with the technology available to us now in modern browsers. It wont be long before FireFox supports image-mask. So this is COMPLETELY relevant to anyone whos interested in showcasing whats possible on the web without the use of images.
You keep supporting IE6 and see where that gets you…
Don’t feed the troll.
Somethings about it i found are interesting…
First the text shadow appeared jaggy on my computer i got it fixed by changing it to 0px 1px 1px instead of 0 1 0.
Second if you add a padding of 1px to the anchor (h1 a{…}) it gives the text a nice 3-D appearance.
Nice tut. Hopefully more fonts will be added to the api soon.
Great Tutorials..,
Waiting for more
Thanks
Your tutorials are always great. You do an excellent job delivering information both visually and orally, and I feel myself growing as a web-developer after watching or reading nearly any of the tutorials you have put up. And the fact that this only works in web-kit should not be seen as a hinderance, as CSS3 and HTML5 are both still coming to age. Just like the twitter button tutorial has options for FF and webkit AND IE9, Im sure this tutorial will eventually apply to all 3 as well given enough time.
Mr. Way, you sure have some cool CSS tricks in your bag. Love this stuff. Thanks again.
loved it, just wish this would be done in foxy.
Can’t wait until all major browsers support this!
Stop it with the CSS3 tutorials.
What about some classic CSS tools.
That would really help us.
Since CSS3 really is the future, starting to learn all the new techniques is really essential! “Classic CSS tools” are really well covered all over the web, including here at nettuts. So if you need help with CSS, just search! Google is your friend. But since these new CSS3 techniques are ground-breaking, spreading them is essential.
Awesome tutorial :)
Great job as always!
Here it is another gradient CSS effect but requires the use of one image(Not pure CSS…):
http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/
Theres another way to do this so that it will work in most browsers. Found it on http://www.webdesignerwall.com. One of the position properties is set to 100%, to make it stretch all the way across.
Nice tip. But it’s not very interesting when it works only on Webkit. Is there any alternative solution for Firefox and IE?
Jeffrey, how is it that you are so well able to read my mind? I have ALWAYS wanted to accomplish this effect without an image, but this is fantastic! Another great tutorial!
really cool thanks!
THAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANKS
Looks like your comment just broke the Internet, well done sir!
Wow!..really cool tip!…but its limitation to webkit kinda puts me off :/
Great tutorial. Thanks!
Awesome, Ill put on my website.
Cheers man.
nice post but it does not work in IE…!!!
What can I say? Nice tutorial!
Great implementation of Google font api.
Nice tutorial. Thanks for the detailed instructions and advice. This is very useful information.
Always nice to learn something new.
Thanks for the tuts and tips.
Simply Awesome technique!!!! and i hate IE, they should wake up and see its 2010 and took the responsibility the mistake they made so far.
Interesting tutorial. Progressive enhancement/enrichment seems like the logical way to go.
CSS3 adds some exciting new styling opportunities but does anyone else worry that there could be a second generation of scrolling marquees, gradients and drop shadows on everything?
Also, it looks like the tail of the ‘d’ can be fixed by giving the ‘h1 a’ a suitable width (100%).
Awesome! perfect!
I looked at in FF, Safari, Chrome and it doesn’t look too bad. Good job.
Is it just me or does no one else see how aliased the edges of letters are?
nice post will try it thanks
Thanks for share Nice CSS Tricks…
This is an incredible post. Its amazing to see what CSS3 can do , at the same time its sad a lot of customers still want IE support which sucks at CSS3 big time.
I am taking the liberty of adding this article to my CSS aggregator site. Hope you dont mind. :)
I see your demo it’s not worked in IE6.
The reason it don’t work in IE6 is because, it’s pure CSS text gradients.. Aka, CSS3 – Don’t support IE6, 7, and 8.
Nice tip. If you want a truly cross-browser solution you could try: http://www.bagnall.co.uk/gradient_text.asp . It’s a bit of a sledge-hammer to crack a nut, but works nicely.