What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

Code Snippet

Home » Code Snippets » CSS » Gradient Text

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-gradient(linear, left top, left bottom, from(#eee), to(#333));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Example

Subscribe to The Thread

  1. Dor

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

    Reply ↓
  2. Aaron Hall

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

    Reply ↓
  3. Alex

    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!

    Reply ↓
  4. Michi

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

    Reply ↓
  5. Aaron

    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.

    Reply ↓
  6. Aaron

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

    Reply ↓
    • David Meister

      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.

  7. sztatty

    not ie(8) compatible

    Reply ↓
    • frango

      Hahaha nothing is ie(8) compatible

  8. wend

    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.

    Reply ↓
  9. Sam Blowes

    Dead link. “Reference URL”

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~