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
Hahaha nothing is ie(8) compatible
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.