Nice Web Type

Nice Web Type is one place for web typography, following experiments, advancements, and best practices in typesetting web text. Handcrafted by Tim Brown, Type Manager for Adobe Typekit.

Pure CSS text gradient (no PNGs)

Folks, grab a copy of Safari 4. This is what we’ll be making today:
Finished product.

That’s not an image, it’s HTML text with real fonts provided by Typekit and embedded via CSS @font-face. You can see the actual thing here: Nice Web Type likes Bello and Proxima Nova.

Underware’s Bello Pro sure makes this example look great, but until Typekit is out of technology preview you’ll have to try this technique with a different typeface. (If you do, comment here and link it up!)

Follow along or skip to the final result.

The markup

<h1><a href="#">Filthy</a></h1>

That’s it for the type effect. You can have it sit on top of any background you like by placing this h1 inside of a div and giving the div a background (in my example, I used a closeup of motorcycle chrome).

The style

There are actually four HTML items we’ll be addressing with CSS:

  1. The h1 element
  2. The text-shadow of the h1 element
  3. The a element inside the h1 element
  4. CSS-generated content that lives in the h1 element, beside the a

Style the h1

Step one.

The first thing we’re going to do is style the h1 so that it takes up a good amount of room. Here’s where you specify the typeface you want to use for the effect. Choose something thick enough that folks will notice the gradient, and something with rounded edges will help simulate the 3D effect of our text-shadows.

h1 {
  font-family: "your ideal typeface", Verdana, sans-serif;
  font-size: 300px;
  line-height: 300px;
  text-shadow: -3px 0 4px #006;
  }
h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
  color: #d12;
  }

Nudge this text-shadow away from the text just slightly. It ends up looking like a neon glow, and you want it to have a touch of finesse. It’s not the main effect. Then, style your a element with the color you’d like to use for the top of your text gradient.

Fading this into nothingness

Step two.

Now comes the cool part: applying a mask using the CSS mask and CSS gradient properties in Apple Safari (Webkit).

h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
  color: #d12;
  -webkit-mask-image: -webkit-gradient(linear, left top, »
    left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  }

-webkit-mask will accept a whole bunch of different things, including images. We can use a -webkit-gradient value as a mask because it is technically an image. RGBa color allows us to fade from full alpha-channel opacity to none (transparent alpha channel).

Fading into a different color

You’d think you could, instead of using a mask and RGBa alpha gradient, just use the CSS gradient instead of a color value on your text. But because of what we just read (-webkit-gradient counting as an image), you actually can’t.

So to fade the color of your a element into a second color, you actually need a second copy of the word to be sitting exactly behind the one that’s fading into nothingness.

Step three.

h1:after {
  content: "Filthy";
  color: #000;
  text-shadow: 3px 3px 1px #600;
  }

The only text in our markup is, “Filthy”. We could have put a second one in there, wrapped in a span, but we don’t want a second Filthy in there dirtying the markup. Instead, we use the CSS :after pseudo-selector and the CSS content property to inject our twin Filthy into the markup. This one we’ll style black and give a hefty text-shadow to simulate thickness.

Stack them

Step four.

h1 {
  position: relative;
  font-family: "your ideal typeface", Verdana, sans-serif;
  font-size: 300px;
  line-height: 300px;
  text-shadow: -3px 0 4px #006;
  }
h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
  position: absolute;
  top: 0; z-index: 2;
  color: #d12;
  -webkit-mask-image: -webkit-gradient(linear, left top, »
    left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  }

By relatively positioning the h1 and absolutely positioning the a inside, as Doug Bowman once showed us how to do, plus adding a touch of z-index, one can be stacked neatly atop the other.

Now just pop that into a composition you’re working on.

The final result

Final result.

HTML:

<h1><a href="#">Filthy</a></h1>

CSS:

h1 {
  position: relative;
  font-size: 300px;
  line-height: 300px;
  text-shadow: -3px 0 4px #006;
  }
h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
  position: absolute;
  top: 0; z-index: 2;
  color: #d12;
  -webkit-mask-image: -webkit-gradient(linear, left top, »
    left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  }
h1:after {
  content: "Filthy";
  color: #000;
  text-shadow: 3px 3px 1px #600;
  }

So there you have it. A pure CSS text gradient with no PNG images necessary. Of course, it only works in Safari … but Safari is the way of the future. Get your mind into techniques like this now, and you’ll know the logic when other browsers catch up.

See this technique in action:
Nice Web Type likes Bello and Proxima Nova

UPDATE: the CSS content property doesn’t translate. Fixed.

  • Getting some quite varied displays for the page in Windows browsers. In Safari, Firefox and Opera, the descenders of Bello get cut off. In Opera, only the first letter of each heading is rendered in Bello, the rest in Verdana.

    Opera’s also not displaying Proxima, and in Firefox it looks much lighter than it does in Safari – Safari renders the headings like your screenshot, but the body type is closer in Firefox; in Safari it looks like it’s bold.

    Like the gradient effect though. :)

  • Sorry, should’ve been more specific – that’s Firefox 3.5, Opera 10b2 and Safari 4.0.2.

  • John, just saw your first note and was about to ask for the browser versions, but you beat me to it. Thanks, that’s very helpful.

  • Awesome, technique – I just wish it was widely supported. FF does this strange clipping of the descenders, I guess they haven’t smoothed out the bugs with @font-face.

    love the site, I’ll be around more!

  • Pretty soon you will be able to use -webkit-gradient with -webkit-text-fill-color directly :)

  • Nice technique and beautifully outlined—thank you for the article.

    The only gripe I have with the fading to another colour by duplicating the content of the element using :after pseudo-selector and the content property is that you’re more restricted to static content and in effect you’d be duplicating the content of the element. Doh.

    Cheers. (:

  • (Ha, I was about to say water is hot.)

    I think Safari, Opera, and Firefox are the only browsers with @font-face, right now, but one can still see the gradient effect in any modern webkit browser, such as Chrome and Omniweb.

    I agree that Webkit is the way of the future, but I think all the non-Safari Webkit fronts are too-often totally ignored.

  • @Michael Kozakewich: Nope, IE invented it as of 4.0 (which is what the W3 spec is based off of), but you have to render your files as *.eot using their converter.

  • I love this, thanks for putting it together!

  • Very nice! I can’t wait until all of the browsers adopt CSS3 and HTML5.

  • It looks pretty, for sure – but you’re relying on including page content in your stylesheet, which is exactly opposite to the aim of well-written and well-intentioned CSS. It’s an interesting reversal of the more common ‘style inside the content’ syndrome, but still a big no-no.

    I’d much rather have good separation than unmaintainable eye-candy any day.

  • The future is bright. Now just to get everyone to play nice.

  • How do you embed the font?? Very interesting but a lot of people do not have latest browsers installed. I am using Safari and when I click on the link there is no gradient on the text!!??

  • Michael, I’m sorry that this example is not clear about how to embed the typeface. Because I’ve used type from Typekit, which is not yet available to the general public, I didn’t offer this example as a download. You wouldn’t have been able to try it out.

    Please see the other examples I have made using typefaces that are free and available for @font-face linking. If you download the files to try the examples out for yourself, you can view source and see how type is added to the design.

    If you don’t feel like doing all that, Ralf Hermann’s wiki is an excellent resource for learning about @font-face, as is Håkon Wium Lie’s article from A List Apart.

    True, lots of people will not see the text gradient. This technique relies upon Webkit-specific CSS rules, and not everyone uses a Webkit-based browser. However, those folks should still see the content clearly (the red word, Filthy, without a gradient).

    What version of Safari are you using?

  • Thanks everyone, for the kind words. I too am looking forward to greater support for exciting techniques like this.

  • Pretty cool. Don’t think the browser changeover is coming nearly as quick as some do though.

  • Definitely cool. There is the caveat that it will not work to style arbitrary content, since you need to know the text content of the element and be able to rely on it being fixed. That’s a shame, as it’d be fun to use on page headings and navigation, but it’s still great for applying to branding areas.

  • Great.
    In Firefox 3.0.13 work fine to.

  • I can’t wait for proper @font-face support by MS!!! Thank you for this article…

  • Thanks, Need to try it out

  • Very interesting. I havent delved into this area of CSS. not sure if its useful or not. Thank you.

  • Brillant, yes webkit IS the future, even Microsoft think so

  • Crash

    Aside from this site itself losing formatting and a Warning at the top of the page… The actual result: image + Text looks just fine in IE6, afaict identically to Opera 10′s rendering.

  • currently its not working with ie 6, but other like FF and crome its fine

  • codebreaker

    a filthy lie.
    Safari is not the “future.” It is WEBKIT. Please get it right before evangelizing more bullshit for Apple.

    Signed,
    Angry.

  • Matt

    Hey codebreaker, Apple is the future.

  • harleyMC

    Elegant coding! Thankyou for sharing.
    This makes it possible that even semilegible fonts can be understood by cutting and pasting into a differnt application rather than having to decipher an image. Or text to speech – WOOT!

    As to the choice of Bello as a beautiful font, I really beg to disagree. I found legibility a major issue.
    My first two takes on what ‘Filthy’ was, were Filthge and FilthSe.
    That lower case y is a shocker It shouldn’t take several seconds before understanding a letter that is in context.

    Anyway that is a side issue – awesome post regarding the CSS coding. Many thanks for posting this.

  • That’s damn cool dude, thanks for the share. Css rules! :)

  • Steve

    This is a really cool technical demonstration, but a few comments:

    Regarding “Safari is the way of the future” – not true. If you’re doing web development for paying clients, Safari is nowhere near the way of the future. The vast majority of website visitors are using Windows – a platform where IE and Firefox dominate. For good reason, too – Safari on Windows is absolute garbage. It’s horrible. Safari on macs, and on my iPhone, is a reasonable browser, don’t get me wrong…

    HTML5 and CSS3 are the way of the future, not Safari. But that future is still a little ways off. The techniques you’re using here will likely be well supported in Firefox and Opera and maybe even IE9 in the next year or so.

    Still, a cool demonstration / proof-of concept.

  • This is so super. It’s like photoshopping with webkit in a browser. Didn’t know this existed. Thanks.

    Does this load fast?

  • I must be missing something the final is just an image!

  • LOVE_MOSS_NOT

    I only see the F when using Safari on a PC…

    Nice technique !..

  • thanks for the share.

    optimize your site with Quintema

  • so great, we can do it just use CSS…awesome
    thanks for tutor

  • While I appreciate this article, there are easier ways to achieve gradient text in WebKit. There should be no need to specify the text in CSS as well as in your markup, nor the need to nest an element inside (although obviously nesting an anchor inside a header is very useful).
    I wrote an article on my blog, but here’s the gist of how to circumvent these requirements:
    Instead of having an overlay element with -webkit-mask-image, use -webkit-background-clip: text to clip a -webkit-gradient to the text within an element. Just make the text color transparent to see through to the background and you’re done!

    Hope that helps someone in the future!

  • Very nice! I can’t wait until all of the browsers adopt CSS3 and HTML5.

  • Thanks, Need to try it out

  • Hey Brandon, that’s a great tip, thanks! I’ve been looking for some good CSS3 tutorials. I’ve heard that A List Apart is gonna bring out a CSS3 book. That would be great.

    Excellent tutorial by the way!

  • Well done! so great, we can do it just use CSS…awesome
    thanks for tutor!

  • With regard to the title Nice Web Type – Pure CSS text gradient (no PNGs), it sort of took me by surprise for a second but finally I get it. I’ve been wondering similar stuff at my blog http://sjamessmith.livejournal.com. I’d greatly love your input on what I talk about. Marion Holtberg

  • I appreciate your work, the post is really helpful. It’s some pretty great info, I appreciate the information you provided is excellent post. Thank you.

  • Great Post !
    I enjoyed reading it…

    | Web Design | Web Development | WebProject |

  • Great tips! Very nice! I always follow this website…

  • Great job! Keep on the good work!

  • Pure CSS text gradient (no PNGs), it sort of took me by surprise for a second but finally

  • Looks great!

  • That’s explained a few things to me, I noticed some of these webkit css styles being used in a few templates recently.

  • Nice Article. Looks great! Waterontharders

  • This is so super. Does this load fast?

  • Same question as the previous commentor….

  • browse to a pdf link in the built in browser it says it can’t download the file as there is no associated application. Is there anyway I can associate my application so that it will download

  • thanks man. I’m not a old style HTML developer. Now i know how powerful CSS can be.

  • Brilliant. I didn’t even know this was possible. I’ll certainly be directing my members towards this post!

  • Looks great indeed!

  • there are easier ways to achieve gradient text in WebKit, there should be no need to specify the text in CSS as well as in your markup, nor the need to nest an element inside

  • I Like the post, very well done and written. Looking forward to the next read.

    bruidsreportage
    fotografie hengelo
    Portret model fotografie
    glamour fotografie
    reclame fotografie
    kinderfeestje Hengelo

  • Respect :-) Very well done! Now wait till all browser support this…

  • Amazing tutorial, thanks a lot! I’ve been experimenting with CSS 3 font-face, text-shadow and gradients a lot now. I love the effects you can achieve with solely using CSS!

  • Thanks, rellay good article and well explained

  • Very nice read… I hope you will post a new one soon.

    waterontharder

  • Love this little tutorial!

  • That is really a impressive topic..Thank you for sharing this with us…

  • I was looking for article on this topic to complete my assignment in the college, and it has same topic with your article. Thanks, great share..

  • The metal militia wont go to study the realities of really groovy knife weilding skills.
    It is nearly too much for the underground to understand. Do we really have to figure out the actual reason we all succeed.This is spinable.

  • Please take a look at it if you wish to know how to get them both to play nicely together; hopefully as quickly and painlessly as this really good tutorial.

  • johnroman

    I always like to see individuals being awarded for their hard work and dedication.
    link building services

  • Josh

    i have read your blog and find that your articles are amazing, i have added this into my bookmark. thanks a lot.
    resignation letter sample
    ovulation symptoms

  • Nice tutorial, cant wait to get these kind of tricks up and running. Have to agree with Steve tho, full compatibility for HTML5 and CSS3 are the way of the future for all browsers, Safari will never be the way for commercial web projects.

    IDW

  • Excellent is the only word i can give u for this wonderful blog, keep it up. I will come back again to read some more interesting things on this topic

  • This is highly informatics, crisp and clear. I think that Everything has been described in systematic manner so that reader could get maximum information and learn many things. This is one of the best blogs I have read.

  • Your way of describing is very good and easy to use for all. Thanks for sharing such a nice tutorial.

  • This is a good resource. Results seem to vary from other websites I’ve used. This seems to be pretty accurate.

  • Matt Rittman

    This isn’t working for me…

    And what if you have dynamic content? I don’t believe you can change a CSS property dynamically…

  • If you’re reading this, it means Nice Web Type’s CSS (the visual instructions that make this outline look like a website) is not being applied. This can happen for several reasons. If you’re using Internet Explorer 6 or earlier, or some other old browser like AOL, CSS is off by default. If you’re using a modern browser and you’re still seeing this

  • Thank you for sharing the interesting posts. I have all this wonderful, wonderful to written.will before.Thanks this.Keep them in mind to think a lot of friends here has a blog

  • The information is no doubt very useful and and rarely available collection.

  • I’m always looking for new ways to improve my website look and feel.

  • I never realised that you could do this with CSS.

  • CSS is very flexible.

  • Thanks some great information here keep up the good work. I actually provide a more constructive comment as I’m a bit out of my deph but i will be checking back here for further updates. Goodluck, Roy Mendez

  • Nice reading, very informative and high quality!
    Schiphol Taxi

  • Very useful! thanks for sharing this. it works fine in all browsers i tested.

  • I fit in with your conclusions and will eagerly look forward to your approaching updates.

  • You’re so cool! I don’t think Ive read anything like this before. So good to find somebody with some original thoughts on this subject. Thanks for starting this up. This blog is something that is needed on the web, someone with a little originality. Good job for bringing something new to the internet!

  • Good message, very helpful. Keep us posted on this subject!
    Twentec

  • Fun to read and also helpful. Try to keep it up!
    dakwerken Borne
    dakbedekking Borne

  • Fantastic… I have to say this information really helps me a good deal. I must thank you for posting such helpful facts and genuinely helps me a great deal. Many thanks for that share. ~~

  • Excellent read, I just passed this onto a colleague who was doing a little research on that. And he actually bought me lunch because I found it for him smile So let me rephrase that: Thanks for lunch!
    Jenni @ Iphone Spyware

  • Hello, this is unquestionably a seriouslyoutstanding post. In principle I’d wish to
    generate like this too – taking time and real work to make a great post… but what
    can I say.!. I procrastinate alot and by no means seem to obtain anything done.
    Thank You

  • wow amazing work i cant make it using photoshop also… thanks for giving out the code i will learn how to make it one like that

  • Its a great pleasure reading your post. Its full of information I am looking for and I love to post a comment that “The content of your post is awesome” Great work.

  • Hye Admin,

    Very useful information .

    but all browser don’t support,

    Thanks for sharing ,

  • Good quality read… very informative! And ofcourse a happy new year!
    Ipad Kopen

  • It was a great chance to submit pic for Peeps in Places and I think I have missed.Congratulate for those who have participated.

  • Wow i don`t know why but i have a thing for emulators.

  • awesome! thanks for the tips and sharing.

  • I had no idea you could do this using css. It gives you a great deal more flexibility over your websites.

  • Very interesting tutorial. You can really improve the look of your websites by applying this.

  • Thanks for a nice share you have given to us with such an large collection of information. Great work you have done by sharing them to all. simply superb

  • I suppose this is a peek into the future, hopefully with the growing support for HTML5 this will become standard too.

  • I suppose to search some information about my thesis and I mistakenly click this blog site. It caught my attention and read some of the posted text and came to the point that I was to finish the whole paragraph.So weird.. hehe

  • Interesting fonts.. I like the “Fading this into nothingness”. Perfect for my invitation cards.

  • I wanted to drop you a quick note to express my thanks as I have enjoyed the way you’ve structured your site which is very nice one and gives in depth information. I think it will be helpful for me as well.

  • Thanks for a nice share you have given to us with such an large collection of information. Great work you have done by sharing them to all. simply superb

  • dieet

    This is amazing!!

  • This is really a nice tut to learn better css

  • I like this approach… it is modern and interesting!

  • erd

    So is this supported by most browsers now, or are there still bugs in the code. I really like the effect so I would love to use it!

  • This is my first opportunity to visit this website. I found some interesting things and I will apply to the development of my blog. thanks for sharing useful information

  • Sandra Bellaz

    The tutorial is impressive, but is it going to work on all the modern browser or just Safari?
    posizionamento motori di ricerca
    car hire cyprus
    car hire paphos

  • There is nothing better then using CSS. It does such a great job when creating websites. I definitely recommend it.

  • great post and creative ideas. I am happy to visit and read useful articles here. I hope you continue to do the sharing through the post to the reader. and good luck for the visitors site

  • This great article definitely worth reading. I ran across the application well crafted together with easily easy to undestand. I would like to i believe we appreciate you the time period you spent to write the item. My business is happy as well as look for future posting.
    Samsung Galaxy Tab Spy App

  • I think you’ve made some truly interesting points.

    tax credits calculator

  • Earphones not only serve for essential tools to listen to music, but also to show your unique taste. That is why so many young people would like to seek Sony and buy them with quite a high price.

  • very very nice blog…..
    boob job

  • Please more this kind of tuts!

  • ps like this kind of minimalistic bloglayout!

  • A perfect info source for souvenirs from Vienna No doubt this is an excellent post I got a lot of knowledge after reading good luck. Theme of blog is excellent there is almost everything to read, Brilliant post

  • I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog, I will keep visiting this blog very often.

  • I can’t believe it is not an image! Will use it for my site.

  • Awesome post! I am really glad that JQuery includes a Grid control or else we will have to run loops and create tables. I am wondering that if third party tool vendors will start creating MVC controls.

  • A perfect info source for souvenirs from Vienna No doubt this is an excellent post I got a lot of knowledge after reading good luck. Theme of blog is excellent there is almost everything to read, Brilliant post

  • N
    i
    ce p
    ao
    t
    for read, thanks a lot for the share.

  • I have you bookmarked your web site to check out the brand new stuff you post.Should you’re keen on having a visitor weblog poster please reply and let me know. I will give you unique content in your website, thanks

  • Great information. I got lucky and found your site from a random Google search. Fortunately for me, this topic just happens to be something that I’ve been trying to find more info on for research purpose. Keep us the great and thanks a lot.

    Frisco Plumber

  • This is a great read! thanks for sharing

  • hakans

    Thanks some great information here keep up the good work. I actually provide a more constructive comment as I’m a bit out of my deph but i will be checking back here for further updates resignation letter

Twitter: @nicewebtype
Dribbble: timbrown

Combining Typefaces

 

I wrote a small book about combining typefaces. Buy it for less than the cost of a fancy beverage.