Grow your CSS skills. Land your dream job.

Last updated on:

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. Dor
    Permalink to comment#

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

    • mukki
      Permalink to comment#

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

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

  3. 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. Permalink to comment#

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

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

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

    • 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!

  7. sztatty
    Permalink to comment#

    not ie(8) compatible

  8. 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. Permalink to comment#

    Dead link. “Reference URL”

  10. Edward yipp
    Permalink to comment#

    thanks for the post!
    awesome as always! :)

  11. 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. Salmonface – that’s using the :after method too. Dang. So for now, for text, it’s gradient OR shadow/stroke.

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

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

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

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

  17. 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. 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. 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. 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. Safatash
    Permalink to comment#

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

  22. Great post!

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

    Thanks! :)

  23. Permalink to comment#

    Very helpful.Thank you!

  24. David Parker
    Permalink to comment#

    YEAH BABY! This is awesome. You can cool but pointless stuff like this

    http://jsfiddle.net/hzNmQ/

  25. David Parker
    Permalink to comment#
  26. 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. 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. Nimmi
    Permalink to comment#

    It works only in Chorme

  29. Harry
    Permalink to comment#

    Too Good sir, Thanx

  30. 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. Akyy
    Permalink to comment#

    Hi, Any idea for border gradient.

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

    What about the cross browser compatibility

  34. 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. This fails miserably on the native Android browser. The gradient shows up, but only as one big gradient block.

  36. AshhR
    Permalink to comment#

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

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

  38. Andrew
    Permalink to comment#

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

  39. Yunus
    Permalink to comment#

    Not working in IE10…others are far away

  40. Pritam
    Permalink to comment#

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

  41. Permalink to comment#

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

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

  43. Prima
    Permalink to comment#

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

    Many thanks!
    Nub

    • Designed cup
      Permalink to comment#

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

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

  44. jagadish
    Permalink to comment#

    Good work… Keep goiing….

    Thanks

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

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".