This is WebKit only, but is the cleanest way to accomplish it as the text remains editable and selectable web text.
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.
Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.
Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.
Looks very nice. Will do magic with Logos (though it’s only webkit xD)
so This method has the one disadvantage/ text-shadow is not compatible with these properties
Render text twice, absolute position second text to be over top of one another. then give bottom one text-shadow. Done.
Nice, Jake! I tried that. Works like a charm! Highfive!
Woah! That’s awesome and thanks for the post! I can use something for my website.
Tried it, and I just got black text with something that looks like it has a text-shadow of 0px -1px 1px #FFF?
That’s really un-neat, but thats what it looks like! Did I make a mistake? I used the exact code!
The example won’t show as i expected?
I only looks like a plain header.
Help anyone?
Hmm, it’s not working if you applied with text-shadow. There gotta be another way. By the way, the “Reference URL” no longer worked.
I think this is the only solution that really worked: http://nicewebtype.com/notes/2009/07/24/pure-css-text-gradient-no-pngs/
that solution requires either knowing the text in advance for your :after rule, so it won’t work with dynamic output from a CMS, or duplicating your content in adjacent spans. Assuming that you are putting your pretty gradients on your site’s keywords, the duplicate span idea = duplicate content seen by search engines which is not-so-great for SEO.
text gradients fall firmly into the “nice to have”, I’m glad that i have something pretty to show a client in chrome/safari and the fallback of plain text in other browsers is totally acceptable.
I was doing some internet browsing and came across this thread.
David, you could work around the :after issue in CMSs if you go
content: attr(title);. This would work with data attributes as well in case your title attribute is already “taken”.Cheers!
That’s awesome Aaron and Marvintus. Thanks.
not ie(8) compatible
Hahaha nothing is ie(8) compatible
Sure it doesn’t work with ie. But I would still use it and apply conditional statements… I’m sure most of you do this.
Dead link. “Reference URL”
Thanks, I’ll just remove it, the demo is enough anyway.
thanks for the post!
awesome as always! :)
Doesn’t work with text-shadows in the same style :(
I may just have to revert back to using PNGs.
Never mind, it seems someone has already cracked it: http://stackoverflow.com/questions/3802218/how-do-i-combined-css-text-shadow-and-background-image-webkit-gradient
Salmonface – that’s using the :after method too. Dang. So for now, for text, it’s gradient OR shadow/stroke.
Actually, we can use -webkit-text-stroke for now (our context is webkit only).
It doesn’t work in Mozilla and Ie.
How can i apply this effect in both are above browser?
Woah! That’s awesome and thanks for the post! I can use something for my website.
hi there!
any way to add text-shadow to text with gradient? i tried to do that but shadow goes in front of text…
Hi, Alex. You can but it requires a little more markup. Take a look here. Cheers!
Great technique but I’ve just tested this on a retina display iPad and the text looks blurry, especially when zoomed in – like it’s actually at bitmap image.
I’ll keep playing to see if there’s a solution, unless someone can enlighten me?
I’ve tested the page with the latest Google Chrome (version 19) and the text is completely invisible. Please advice is there another way to accomplish text gradient ?
Looked fine until I added a white text-shadow, then it screwed up. I wish the people responsible for CSS and the browser guys would would just come together for once and fix this stuff… this is elementary page layout stuff since Pagemaker… it’s not rocket science!
This won’t work with text shadows though.
The perfect 3D text will be seen at : http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-nonintrusive-css-text-gradients/
They use a nice :after pseudo class to achieve the text-shadow
But still I found that you can’t insert line breaks if you need some multi line gradient texts. I have tried with and \r as well, both donot work.
If somebody finds a solution to it, then please notify me.
Any solutions to add text-shadow to text with gradient?
Great post!
My Firefox browser is having problems with showing the gradients – does anyone know if there a snippet for FF?
Thanks! :)
Very helpful.Thank you!
YEAH BABY! This is awesome. You can cool but pointless stuff like this
http://jsfiddle.net/hzNmQ/
Excellent. but works only in chrome. not in firefox.
or this http://jsfiddle.net/kk5eG/
I wrote a simple SCSS mixin that incorporates this trick w/ a cool non-webkit fallback that mixes your 2 colors @ 50%.
@mixin lineartextgradient($color1, $color2, $startPoint:left top, $endPoint:left bottom) { color: mix($color1, $color2); background: -webkit-gradient(linear, $startPoint, $endPoint, from($color1), to($color2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }As I mentioned to Alex, there is a way of adding a text-shadow-like effect using an absolutely positioned span inside the heading tag. Here is a working JSFiddle.<br/>
Cheers!
It works only in Chorme
It also works in Edge, the new browser that comes with Windows 10, which is, apparently, webkit because you will need the vendor prefix, -webkit-.
Too Good sir, Thanx
this doesn’t works for mozilla, only for the chrome and safari?? do u have any technique to show in mozilla also..
Hi, Any idea for border gradient.
I don’t know if someone already asked this, but is this gradient trick in mozilla? I replaced -webkit with -moz thinking it’d turn out the same, but the gradient appears to be a gradient box behind the letter rather than filling in the letter with the gradient.
What about the cross browser compatibility
It says right at the top: “WebKit only” – that means it does not work in Firefox or Safari, and definitely not in IE.
This fails miserably on the native Android browser. The gradient shows up, but only as one big gradient block.
Great Post !! Keep it Up !!
But what about Mozilla & Opera…. Any Solution ??
hmmmmmm nice !! but…waiting for all browsers support
thanks for sharing :)
It has vig problem if you add “text-shadow” property.
Not working in IE10…others are far away
Do u have any technique to show in mozilla also.. it works proper in chorme
This is not “webkit only” now. “Opera” taken this prefix too, but don’t working…
here’s a demo of gradient text + text shadow http://jsfiddle.net/2GgqR/258/
hi it works for me! But is it possible to do a horizontal gradient from here.
Many thanks!
Nub
Just add: “left” or “right”, like this :
background: -webkit-linear-gradient(right, #FC3,#FC3,#fff);
Good work… Keep goiing….
Thanks
h3{font-family: ‘Black Ops One’, cursive;
font-size:50px;
background: -webkit-linear-gradient(#fff, #FC3,#FC3,#fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
showing only plain black text!!!!!!!!!!!
on chrome and opera is good, but on firefox is not effect :(
Plz find a solution for Mozilla text gradient.
only work in chrome even not work in mozila.
This works with edge, the browser that comes with Windows 10. Thanks!
You will only need the vendor prefix for -webkit-background-clip: text;
-webkit-text-fill-color: transparent.
Great post!
Thanks!
Cool to use in android browsers.
its not supporting in Mozilla firefox.
For Mozilians, here is a working codepen:
hey! This is Only for Chrome….
Hey! “This is WebKit only…” – Chris Coyier
Webkit is Chrome, true…. but BONUS! …you get Safari too!
And as with all browser prefixed properties friendly fallbacks are so easy to implement! Just give you text a color property before the gradient-associated properties and you will have nice solid color on the browsers that don’t do webkit.
After all, gradient filled text is kind of a fetish, er… I mean a non-essential styling. If you really must have it you could try using SVG element and apply whatever shenanigans, er… I mean styling you want!! Cheers!
Hey guys!
Just to give an update on Firefox here to the next readers..
WOKING with FF 49.0.2 (on Mac?)..?!
As I read Firefox gets more and more webkit standards. If IE also supports and gets more webkit – we’re good.
Is there some workaround code so that it will look nice in webkit browsers but still appear as solid text in others? The letters are there in IE, but they aren’t visible unless you highlight them.