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;
}

Example

Comments

  1. User Avatar
    Dor
    Permalink to comment#

    Looks very nice. Will do magic with Logos (though it’s only webkit xD)

    • User Avatar
      mukki
      Permalink to comment#

      so This method has the one disadvantage/ text-shadow is not compatible with these properties

    • User Avatar
      Jake Crawford (Harrisburg, PA)
      Permalink to comment#

      Render text twice, absolute position second text to be over top of one another. then give bottom one text-shadow. Done.

    • User Avatar
      Zach
      Permalink to comment#

      Nice, Jake! I tried that. Works like a charm! Highfive!

    • User Avatar
      James

      This worked for me using
      text-shadow: 4px 4px 4px black;

  2. User Avatar
    Aaron Hall
    Permalink to comment#

    Woah! That’s awesome and thanks for the post! I can use something for my website.

  3. User Avatar
    Alex
    Permalink to comment#

    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!

  4. User Avatar
    Michi
    Permalink to comment#

    The example won’t show as i expected?
    I only looks like a plain header.
    Help anyone?

  5. User Avatar
    Aaron
    Permalink to comment#

    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.

  6. User Avatar
    Aaron
    Permalink to comment#

    I think this is the only solution that really worked: http://nicewebtype.com/notes/2009/07/24/pure-css-text-gradient-no-pngs/

    • User Avatar
      David Meister
      Permalink to comment#

      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.

    • User Avatar
      Marventus
      Permalink to comment#

      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!

    • User Avatar
      Seigfred
      Permalink to comment#

      That’s awesome Aaron and Marvintus. Thanks.

  7. User Avatar
    sztatty
    Permalink to comment#

    not ie(8) compatible

  8. User Avatar
    wend
    Permalink to comment#

    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.

  9. User Avatar
    Sam Blowes
    Permalink to comment#

    Dead link. “Reference URL”

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Thanks, I’ll just remove it, the demo is enough anyway.

  10. User Avatar
    Edward yipp
    Permalink to comment#

    thanks for the post!
    awesome as always! :)

  11. User Avatar
    Salmonface
    Permalink to comment#

    Doesn’t work with text-shadows in the same style :(

    I may just have to revert back to using PNGs.

  12. User Avatar
    folktrash
    Permalink to comment#

    Salmonface – that’s using the :after method too. Dang. So for now, for text, it’s gradient OR shadow/stroke.

  13. User Avatar
    folktrash
    Permalink to comment#

    Actually, we can use -webkit-text-stroke for now (our context is webkit only).

  14. User Avatar
    Honey

    It doesn’t work in Mozilla and Ie.
    How can i apply this effect in both are above browser?

  15. User Avatar
    manojyadav
    Permalink to comment#

    Woah! That’s awesome and thanks for the post! I can use something for my website.

  16. User Avatar
    alex
    Permalink to comment#

    hi there!

    any way to add text-shadow to text with gradient? i tried to do that but shadow goes in front of text…

    • User Avatar
      Marventus
      Permalink to comment#

      Hi, Alex. You can but it requires a little more markup. Take a look here. Cheers!

  17. User Avatar
    Dan S
    Permalink to comment#

    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?

  18. User Avatar
    Raze

    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 ?

  19. User Avatar
    Derry
    Permalink to comment#

    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!

  20. User Avatar
    Deveedutta
    Permalink to comment#

    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.

  21. User Avatar
    Safatash
    Permalink to comment#

    Any solutions to add text-shadow to text with gradient?

  22. User Avatar
    Dansk Affugtning
    Permalink to comment#

    Great post!

    My Firefox browser is having problems with showing the gradients – does anyone know if there a snippet for FF?

    Thanks! :)

  23. User Avatar
    Michael Mars
    Permalink to comment#

    Very helpful.Thank you!

  24. User Avatar
    David Parker
    Permalink to comment#

    YEAH BABY! This is awesome. You can cool but pointless stuff like this
    http://jsfiddle.net/hzNmQ/

  25. User Avatar
    David Parker
    Permalink to comment#
  26. User Avatar
    Jed Hunsaker
    Permalink to comment#

    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;
    }
  27. User Avatar
    Marventus
    Permalink to comment#

    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!

  28. User Avatar
    Nimmi
    Permalink to comment#

    It works only in Chorme

    • User Avatar
      Derreck
      Permalink to comment#

      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-.

  29. User Avatar
    Harry
    Permalink to comment#

    Too Good sir, Thanx

  30. User Avatar
    srinivas
    Permalink to comment#

    this doesn’t works for mozilla, only for the chrome and safari?? do u have any technique to show in mozilla also..

  31. User Avatar
    Akyy
    Permalink to comment#

    Hi, Any idea for border gradient.

  32. User Avatar
    Gaby
    Permalink to comment#

    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.

  33. User Avatar
    Hifzur

    What about the cross browser compatibility

  34. User Avatar
    Paul
    Permalink to comment#

    It says right at the top: “WebKit only” – that means it does not work in Firefox or Safari, and definitely not in IE.

  35. User Avatar
    Andrew

    This fails miserably on the native Android browser. The gradient shows up, but only as one big gradient block.

  36. User Avatar
    AshhR
    Permalink to comment#

    Great Post !! Keep it Up !!
    But what about Mozilla & Opera…. Any Solution ??

  37. User Avatar
    Satish Borkar
    Permalink to comment#

    hmmmmmm nice !! but…waiting for all browsers support
    thanks for sharing :)

  38. User Avatar
    Andrew
    Permalink to comment#

    It has vig problem if you add “text-shadow” property.

  39. User Avatar
    Yunus
    Permalink to comment#

    Not working in IE10…others are far away

  40. User Avatar
    Pritam
    Permalink to comment#

    Do u have any technique to show in mozilla also.. it works proper in chorme

  41. User Avatar
    Alexander
    Permalink to comment#

    This is not “webkit only” now. “Opera” taken this prefix too, but don’t working…

  42. User Avatar
    Wilbert Santos
    Permalink to comment#

    here’s a demo of gradient text + text shadow http://jsfiddle.net/2GgqR/258/

  43. User Avatar
    Prima
    Permalink to comment#

    hi it works for me! But is it possible to do a horizontal gradient from here.

    Many thanks!
    Nub

    • User Avatar
      Designed cup
      Permalink to comment#

      Just add: “left” or “right”, like this :

      background: -webkit-linear-gradient(right, #FC3,#FC3,#fff);

  44. User Avatar
    jagadish
    Permalink to comment#

    Good work… Keep goiing….

    Thanks

  45. User Avatar
    Himanshu
    Permalink to comment#

    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;
    }

  46. User Avatar
    sheetal
    Permalink to comment#

    showing only plain black text!!!!!!!!!!!

  47. User Avatar
    polang
    Permalink to comment#

    on chrome and opera is good, but on firefox is not effect :(

  48. User Avatar
    Ashish dwivedi

    Plz find a solution for Mozilla text gradient.

  49. User Avatar
    Rahul Thakur
    Permalink to comment#

    only work in chrome even not work in mozila.

  50. User Avatar
    Derreck
    Permalink to comment#

    This works with edge, the browser that comes with Windows 10. Thanks!

    • User Avatar
      Derreck
      Permalink to comment#

      You will only need the vendor prefix for -webkit-background-clip: text;
      -webkit-text-fill-color: transparent.

  51. User Avatar
    sh
    Permalink to comment#

    Great post!
    Thanks!

  52. User Avatar
    Farzad YZ
    Permalink to comment#

    Cool to use in android browsers.

  53. User Avatar
    Amitab Singh
    Permalink to comment#

    its not supporting in Mozilla firefox.

  54. User Avatar
    lingtalfi
    Permalink to comment#

    For Mozilians, here is a working codepen:

  55. User Avatar
    Vikas
    Permalink to comment#

    hey! This is Only for Chrome….

    • User Avatar
      Simran
      Permalink to comment#

      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!

  56. User Avatar
    ezkay
    Permalink to comment#

    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.

    • User Avatar
      noneof yourbusiness

      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.

  57. User Avatar
    shae
    Permalink to comment#

    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.

Submit a Comment

Posting Code

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.

Code of Conduct

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.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag