Gradient Text
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;
}
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
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!
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/
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
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