Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how.

View Demos

Download Demo ZIP

Benefits

  • This is pure CSS trick, no Javascript or Flash. It works on most browsers including IE6 (PNG hack required).
  • It is perfect for designing headings. You don’t have to render each heading with Photoshop. This will save you time and bandwidth.
  • You can use on any web fonts and the font size remains scalable.

How does this work?

The trick is very simple. Basically we are just adding a 1px gradient PNG (with alpha transparency) over the text.

screenshot

The HTML markups

<h1><span></span>CSS Gradient Text</h1>

The CSS

The key point here is: h1 { position: relative } and h1 span { position: absolute }

h1 {
  font: bold 330%/100% "Lucida Grande";
  position: relative;
  color: #464646;
}
h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

That’s it! You are done. Click here to view my demo page.

Make it work on IE6

Since IE6 doesn’t render PNG-24 properly, the following hack is required in order to display the transparent PNG (add anywhere in between the <head> tag):

<!--[if lt IE 7]>

<style>
h1 span {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>

<![endif]-->

This is why we hate IE 6!

jQuery prepend version (for semantic lovers)

If you don’t want to have the empty <span> tag in the heading, you can use Javascript to prepend the <span> tag. Here is a sample using jQuery prepend method:

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

  //prepend span tag to H1
  $("h1").prepend("<span></span>");
	
});
</script>

More samples

Want to make Web 2.0 glossy text?

screenshot

Literally, you can apply this trick on any solid background color (as long your gradient color is the same as your background color).

screenshot

screenshot

screenshot

screenshot

screenshot

screenshot

Pattern / Texture

You can also apply this trick with a tile background image. Look, here is an example of zebra pattern. So, be creative!

screenshot

Limitations and more…

  • This trick is only suitable for solid background color elements. Your gradient color (PNG image) must be the same color as your background color.
  • IE PNG hack is required if you want it to work on IE 6.
  • If your gradient image is taller than the heading, the text will not be selectable.

483 Comments

1 22 23 24
  1. Jim
    Jan 27, 2012 @ 4:44 pm

    so the text i want to have a gradient effect is sat ontop of another image. can i still do this?
    css:
    /* ### WELCOME BOX ### */
    .welcomeBox{ padding-bottom:37px; width:658px; overflow:hidden;}
    .welcomeBox h2{
    padding:24px 0px 40px 30px;
    text-transform:uppercase;
    font-size:24px;
    font-family: “Myriad Pro”, Arial, Helvetica, sans-serif;
    font-weight:Bold;
    color:#FF3;
    background:url(../images/welcome_heading.png) left top no-repeat;
    }
    .welcomeBox h2.about { text-transform: none; }
    .welcomeBox p{ padding-bottom:20px; font-size:12px; color:#888888; line-height:20px;}
    .welcomeBox img{ padding:0px 33px 0px 0px; float:left;}
    .welcomeBox a{ padding:9px 16px 0px 16px; height:23px; font-style:italic; color:#000000;text-decoration:none; float:right;font-size:12px; font-weight:normal; font-style:normal; background:url(../images/more_button.jpg) left top no-repeat;}
    .welcomeBox a:hover{ text-decoration: none; color:#d92f7d;}

    Reply

  2. Dan
    Feb 6, 2012 @ 6:06 am

    Reply

    • Andrew
      Mar 30, 2012 @ 5:03 am

      That is much better in the sense that it’s pure CSS, but it’s webkit only, so the support is not great, this method covers all browsers even down to IE6. For now, I’d say this method was better overall!

      Thank you very much for this blog post! It’s a brilliant trick!

      Reply

  3. Aniket - Freelance Web Designer
    Feb 10, 2012 @ 11:07 am

    Really Nice Tutorial.
    Downloaded the attached zip file. Hope this is helpful in future for me. Already bookmarked this.
    Thanks a lot.

    Reply

  4. Red Rays
    Mar 1, 2012 @ 12:58 pm

    Its a very nice place to capture and implementing jquery and CSS.
    I have implemented this

    Reply

  5. Panagiotis
    Mar 18, 2012 @ 2:05 am

    I got the idea for making Gradient Text from this blog and it works perfectly. I just wanna say that there is an alternative on Photoshop.

    Have a look at
    http://www.youtube.com/watch?v=VlBtrDm_JCE

    Reply

  6. d
    Mar 20, 2012 @ 7:17 am

    fgvvhn

    Reply

  7. ahmad
    Mar 30, 2012 @ 2:13 am

    Location of Training

    Reply

  8. David Bachman
    Apr 19, 2012 @ 7:36 am

    this is bad it dont woik

    Reply

  9. model
    Apr 30, 2012 @ 4:49 am

    This does look like a great theme.

    Reply

  10. yemek tarifleri
    May 2, 2012 @ 12:07 pm

    That is much better in the sense that it’s pure CSS, but it’s webkit only, so the support is not great, this method covers all browsers even down to IE6. For now, I’d say this method was better overall!

    Reply

  11. Elle
    May 26, 2012 @ 2:14 am

    Elle , Directioner , Belieber , and I have more followers than friends

    Reply

  12. cyn
    May 31, 2012 @ 7:18 am

    Hi I tried your code it works good but my problem is that my Headline should be inside a 30px height space and now it has too much space up and down.. how can I make the DIV smaller? I tried in css but it is not working :( please help meee

    Reply

    • cyn
      May 31, 2012 @ 8:51 am

      just found the solution :)
      h1 {
      margin: 0;
      }
      that will do it, thanks anyway!!

      Reply

  13. Dmitriy
    Jun 1, 2012 @ 8:28 am

    330%/100%
    that font-size/leading
    but why set the value of 100%, if this value is default?

    Reply

  14. Dmitriy
    Jun 1, 2012 @ 12:50 pm

    How I can do it on white background?

    http://it-spec.com.ua/kremen/error.png

    Reply

  15. DymoLabels
    Jun 1, 2013 @ 9:40 am

    hi
    i really like your collection
    thanks for sharing your collection
    keep it up

    Reply

1 22 23 24

Leave a Reply