Code Snippet
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;
}
Looks very nice. Will do magic with Logos (though it’s only webkit xD)
Woah! That’s awesome and thanks for the post! I can use something for my website.
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.
I think this is the only solution that really worked: http://nicewebtype.com/notes/2009/07/24/pure-css-text-gradient-no-pngs/
not ie(8) compatible