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
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!
This worked for me using
text-shadow: 4px 4px 4px black;
I got mine to work just fine with text-shadow (snippet below):
{
text-shadow: -1px 2px rgba(128, 128, 128, 0.5);
background: -webkit-linear-gradient(whitesmoke, #1e2425);
background-clip: text;
-webkit-text-fill-color: transparent;
}
Great fix, how do I keep the background color black? I am using this on a modal and when I
-webkit-text-fill-color: transparent;then my black background disappears…I don’t understand how to add an underline transition with background simultaneously with this.
Woah! That’s awesome and thanks for the post! I can use something for my website.
Hahah, who else is in love with the new website look
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; }Actually, this doesn’t work on safari
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:
http://codepen.io/giana/pen/RPdLaQ
You are just brilliant… works in both Chrome, Firefox and Safari
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.
at EZKAY — As of the time of your post — Do not expect MS to add this to IE since they have discontinued development — short of rare security fixes.
MS Edge should allow for this at some point in the future. As of my post Edge still shows basic font-color.
If you load up LINGTALFIs CodePen above that code degrades sufficiently to standard colors.
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.
It’s awesome! That’s what I was looking for.
For old browser, like IE, we can use SVG
Use this if this not working
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
h1{
text-transform: uppercase;
background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font: {
size: 20vw;
};
}
Thanks for sharing, I have tried in Chrome 69 64 bit, It’s not at all working.
I’ve created a library maybe 5-6 years ago, maybe come in handy ( at least for inspiration ) for someone, called Gradext.
Animate gradients on text, linear, radial, horizontal, vertical! anyway.
Nice, possible to make a diagonal gradient with that ?
Nice, thanks!) Just found how to use gradient from side to side with text.
It doesn’t work when “text-shadow” is applied. Text-shadow covers the colour.
What would a fallback be for browsers that just show the text as transparent (Safari mobile)?
Nvm, I found out -webkit-text-fill-color: transparent; was making the text invisible on mobile Safari, but it is needed to keep the gradient on Firefox and Edge. I kept the line in, and used the following to remove it for mobile Safari:
@supports (-webkit-overflow-scrolling: touch) {
-webkit-text-fill-color: unset;
}
Let me know if anyone finds a better solution
This was really helpful! I ended up using it for a font awesome icon and it worked great!
Will It work in IE11, I have tried nut no luck.
If you can make it for IE11, can you let us know
I wonder how this would be possible on a print medium. If I try to print it or create a pdf via macOS print in safari, It does not show the font text. I have to unset background, -webkit-background-clip and -webkit-text-fill-color to have default document font colors.
man, how do i change the gradient direction using this method?
Thanks
just add 90 or 180 deg before the color inside the parenthesis
Hey thanks! But how can we set the gradient horizontally?
I’m using the same code
but when I select the heading using a mouse, the texts disappear and only the blue highlight remains.