PSD to HTML conversion PSD to HTML conversion PSD2HTML.com with over 300 professionals takes the designs to HTML and beyond

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

Reference URL

Subscribe to The Thread

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

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

  3. 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. The example won’t show as i expected?
    I only looks like a plain header.
    Help anyone?

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

    not ie(8) compatible

    • frango

      Hahaha nothing is ie(8) compatible

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 ~