Gradient Text | CSS-Tricks (original) (raw)

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

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
- Jake Crawford (Harrisburg, PA)
  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.
- 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.
- 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.
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!
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! :)
- Excellent. but works only in chrome. not in firefox.
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,color2, color2,startPoint:left top, $endPoint:left bottom)
{
color: mix($color1, $color2);
background: -webkit-gradient(linear, startPoint,startPoint, 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.

Cheers!
- 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-.
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…
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;

color:#999;  
margin-left:200px;  
position:relative;  
margin-top:10px;  
}  
h3 {

font-size:50px;
background: -webkit-linear-gradient(#fff, #FC3,#FC3,#fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} 41. showing only plain black text!!!!!!!!!!! 42. on chrome and opera is good, but on firefox is not effect :( 43. Plz find a solution for Mozilla text gradient. 44. only work in chrome even not work in mozila. 45. 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.

Cool to use in android browsers.
its not supporting in Mozilla firefox.
- 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

<svg class="text" xmlns="http://www.w3.org/2000/svg">  
  <linearGradient id="text" x1="50%" x2="50%" y1="10%" y2="100%">  
    <stop stop-color="#EEEEEE" stop-opacity="0" offset="0%" />  
    <stop stop-color="#333333" offset="100%" />  
  </linearGradient>  
  <text x="0" y="0.75em" fill="url(#text)">Example</text>  
</svg>  
.text {  
  width: 310px;  
  height: 72px;  
  font-size: 72px;  
}

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

h3 {  
  background: -webkit-linear-gradient(135deg, #E20001, #ffce22);  
  -webkit-background-clip: text;  
  -webkit-text-fill-color: transparent;  
}

but when I select the heading using a mouse, the texts disappear and only the blue highlight remains.