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


  • 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.


The HTML markups

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


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]>

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


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">

  //prepend span tag to H1

More samples

Want to make Web 2.0 glossy text?


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







Pattern / Texture

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


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.


Jan 17, 2008 at 1:09 am

Interesting idea!

Doesn’t scale if you set the browser text sizes up though. I guess there’s not a lot you could do to resize/scale it up because of the lack of a CSS background scale property…

Still, it looks hot and it’s a great way to have dynamic text without relying on image nesting or replacement. Nice one, Nick!

(and damn IE6 to hell as always)

David Lengyel
Jan 17, 2008 at 1:20 am

It looks nice, great idea. Unfortunatelly, I think it can’t be used in CMS. What if you’ll need longer heading? I’ll try this trick for sure!

Jan 17, 2008 at 1:35 am

Wow nice trick. Thanks a lot for pointing this.
Will surely use it on my next project (if you don’t mind).

Jan 17, 2008 at 1:47 am

I never thought of this, cool trick. ThanX

Jan 17, 2008 at 2:13 am

I used this technique with a gif pattern on my site a few months back for a grunge effect.
I had to do some extra hacks as I use Joomla as a CMS and had to get the span tag in each heading (article title) but I’m happy with the result.

Adam Bard
Jan 17, 2008 at 2:20 am

Why must everyone taunt me with nifty .png tricks? It’s rad, I agree, but for pages with audiences not consisting of web designers it’s too soon to write IE6 off.

Jan 17, 2008 at 2:25 am

Cool Trick. Thanks! You have small typo within your text: You wrote: position: relateive instead of: position: relative.

Jan 17, 2008 at 2:32 am

Genius mate, one of those “Why have I not thought of that” moments.

Jan 17, 2008 at 2:36 am

Great! It looks very cool, but it dosen’t work on IE 6 (Version 6.0.2900.2180.xpsp_sp2_gdr.070227-2254). The Gradient-Image comes over the Text and it’s not possible to read what’s written… Need some Screenshot?

Jan 17, 2008 at 3:19 am

Thanks nick! great post!

Jan 17, 2008 at 3:22 am

Great article, like the idea. It’s a nice trick to accomplish this, only small drawback is that you can’t select a word of the heading. No a really big problem, but still something to remember. Not that you can when you use images, so, it’s also better then images in that way. :-)

Jan 17, 2008 at 3:32 am

To be semantic, instead of text cant we use text?

Also, most bloggers would likely have a text instead of inside the heading elements, which can be used instead of the span too.

Jan 17, 2008 at 3:33 am

yikes, I forgot to put the HTML tags in my comment in . Sorry!

Jan 17, 2008 at 4:20 am

wow. nice one.

Jan 17, 2008 at 4:22 am

Your ‘Make it work in IE6’ has a conditional selecting IE7 instead of IE6. just thought I’d point it out so you could amend it. Argh, we all do this kinda thing, so don’t worry about it… Great post.

Jan 17, 2008 at 4:24 am

oops im a dim wit.. i glossed over the ‘lt’ in the conditional statement. doh!

ignore my last comment.


Jan 17, 2008 at 4:36 am

It’s too bad, it doesn’t look too well w/o font smoothing.

Jan 17, 2008 at 5:42 am

Looks cool! I made some experiments and found that (at least in Firefox) it is not necessary to position the h1 element but only the span element. That makes sense since it is only necessary to take the span element out of the normal text flow to let it flow over the text.

There is only one small problem: This additional span element is 100% presentational markup. It is not much, but it still is presenational markup. I made some experiments with generated content but did not succeed.

@Renato: The screenshot look like it is the old IE6 problem of not supporting semitransparent pngs. Indeed the png should flow over the heading text. Just try it on a simple page with the white gradient png from here and a colored body background (i made it green). That shows how it is working. And it shows the limitations, too.

If anyone has an idea of how to make this without additional html markup…

Jan 17, 2008 at 5:45 am

now this is surely something very very handy!

Jan 17, 2008 at 5:58 am

This is the most smashing trick I’ve come across ever! Thanks a lot for sharing,

Jan 17, 2008 at 6:33 am

Hah, very clever! I would never have thought of this.

Mauro Mazzei
Jan 17, 2008 at 6:35 am

Great article, this is the first post i’ve read here!
i think that i like your works :)


Jan 17, 2008 at 6:39 am

oh, nice idea! look really fine. i’ll test it later!

Jan 17, 2008 at 7:06 am

Great tip!!

Only thing is that you’ve spelt ‘relative’ wrong under the CSS heading for the h1 {position:relative;}

Jan 17, 2008 at 7:06 am

I think you’ve fixed it already!!

Jan 17, 2008 at 7:27 am

Great tip. Will definetly use this. Thanks again.

Jan 17, 2008 at 7:29 am

great =)
i love your blog….keep it up!!!

Jan 17, 2008 at 7:49 am

So cool :)

Jan 17, 2008 at 8:26 am

Great!! Thanks!! I posted an article about that on my site.. Thanks again!!

Jan 17, 2008 at 8:59 am

Thanks dude!

Jan 17, 2008 at 9:21 am

An 8-bit png can be exported from Fireworks and works in IE6 without a hack.

Nice idea by the way, it’s really cool. Only weakness I see is that it makes selecting the text very difficult. You can drag select around the whole line, but not certain words in the middle.

Michael Thompson
Jan 17, 2008 at 9:46 am

You know, while you’re tossing all that extra markup around you might as well extend your JavaScript to duplicate your header and layer it beneath your main one, shifted 1px down and 1px right to create a beveled effect common on most glassy/shiny headings and logos.

You’d be changing the color of course to something that might emulate a shadow or depth effect, and the distance from the original heading could be more than 1px and go right/up, left/down or left/up.

Lim Chee Aun
Jan 17, 2008 at 10:53 am

I guess you need to prevent the text from wrapping? ‘white-space:nowrap’ is the key.

Jan 17, 2008 at 11:03 am

That’s a pretty awesome trick. I am going to try that from now on instead of working on each individual header for hours upon hours trying to replicate previous effects.

Jan 17, 2008 at 11:08 am

@joel #31 : this great feature is described in Sitepoint blog, but happily Fireworks isn’t the only one we can use: ErieStuff noted that an open source program named pngnq will do as well (“optipng -o7” and Tweakpng are useful too).

With those strange but valid PNG-8, you can have in one image:
– 8 bit transparency (so called “alpha” transparency) for good browsers
– 1 bit transparency for IE6 without need of extra CSS, stylesheet or JS
– light weight png and still realistic colors (pngnq is smart when reducing the number of colors, optipng is bruteforce when reducing the weight of the file)

Thiemo Gillissen
Jan 17, 2008 at 12:58 pm

awesome! very cool effects. can’t really believe that’s all css… great

Jan 17, 2008 at 1:25 pm

sooo cool! congrats!
very clever trick, thanks!

Sam Rayner
Jan 17, 2008 at 1:30 pm

Thanks for sharing Nick. You can actually achieve the same thing without the need for an empty span or JavaScript if you’re willing to serve up plain old headings to Internet Explorer though:

Obviously, IE support is more important on some sites than others but it’s nice to have the option there.

photoshop cs3 tutorials
Jan 17, 2008 at 2:25 pm

realy good article!!
will apply it soon.. ;) thanks..!

Jan 17, 2008 at 3:07 pm

fantastic! thank u

Jan 17, 2008 at 3:18 pm

Clever. I’ll definitely bear this in mind should an appropriate project arise. Keep thinking outside the box! (”,)

John Lascurettes
Jan 17, 2008 at 3:23 pm

Slick and simple. My favorite kind of tip.

Jen Germann
Jan 17, 2008 at 3:33 pm

What a great tip!!! Nice creative thinking. Thanks much!

~ jen

Jan 17, 2008 at 3:36 pm

thats awesome, youre are “The” best designer!!!!!!

Richard Davies
Jan 17, 2008 at 3:46 pm

Nice effect!

But it doesn’t seem to work correctly when viewed through FeedDemon 2.6 (on WinXP SP2 with IE6).

Peter From Hoop Creative
Jan 17, 2008 at 4:51 pm

kick ass my friend, kick ass
Looks real simple to boot!
I will be integrating that into a project next week

Jan 17, 2008 at 5:52 pm

Nice trick!

Murat Ayfer
Jan 17, 2008 at 7:14 pm

that’s a brilliant idea. such a small touch, but makes a huge difference.

Jan 17, 2008 at 9:06 pm

oh that is super slick… simple in concept and practice, but such a leap to actually get there. As a wise man once said, “genius is almost always displayed in great simplicity of method.”

Jermayn Parker
Jan 17, 2008 at 9:21 pm

Really like the tip, good to see that you thought of making it usable for links which is important. My only issue is that this will give people an excuse to continue with the over used shiny glossy look which is so arrgghhh old fashioned and rehashed!

Oh for some designers to think of something new rather than rehashing other peoples rehashed designs.

Corey Dutson
Jan 17, 2008 at 10:13 pm

This is fantastic! I can’t wait to find an excuse to use this, thanks a bunch.

Stephen Wilson
Jan 17, 2008 at 10:20 pm

Wow, this is such a great tip/trick. Wish I thought of it!

Min Thu
Jan 17, 2008 at 10:33 pm

This is really a tricky technique. How could you find that out?

Jan 17, 2008 at 11:41 pm

This is just perfect for my upcoming design on my own blog. I was having thoughts on whether I should write a php function for this kind of font style but I’m too lazy for that. haha.

This is really a big help

willem van der pas
Jan 18, 2008 at 5:09 am

That’s really great. I might use it. :) thanks.

Jan 18, 2008 at 10:26 am

Fantastic, the dark background sample looks the best. Very handy trick, may use this in the future!

Jan 18, 2008 at 11:27 am

Respect to your great work and i will use perhaps :)


Jan 18, 2008 at 11:46 am

Pure Web 2.0 heading technique ;) thx

Panagiotis Karageorgakis
Jan 18, 2008 at 12:12 pm

This is a nice technique although not too new actually. Essentially it’s the same as the “worn type” CSS technique (published on Nov 2005) but instead of a grunge pattern it uses a simple gradient to make text shiny. In essence, the web designer can transform typical headings using whatever pattern they wish on top of the text.

But what I don’t really like is the extra <span> in the headers, so when I use such techniques I’d go with the jQuery approach &ndash it won’t do good if JavaScript is off, but it’s better than having to insert a (non-semantic) empty <span> tag inside every heading! (And how has JavaScript off anyway?)

In the worn type article, the author also has a page with examples, similar to the ones you’re displaying, check it out.

Jan 18, 2008 at 12:43 pm

so easy, so great!

Jan 18, 2008 at 1:02 pm

Great Tutorial!

Jan 18, 2008 at 1:24 pm

Thanks lots, this is sooo useful!

Jan 18, 2008 at 5:09 pm

Neat trick! And this idea opens up sooo many more opportunities!
Jan 18, 2008 at 5:34 pm

you always have the best tips
thank keep it coming

Jan 18, 2008 at 5:38 pm

Thanks!! I have been trying to do something like this for a long time. I never thought about using a png. :) thanks!!

Jan 18, 2008 at 7:09 pm

So simple, and yet, so effective. That gets a big thumbs up, along with a “why didn’t I think of that?”

Thanks and cheers!

Jan 18, 2008 at 10:15 pm

This is ridiculously simple and clever.

Jan 18, 2008 at 11:50 pm

dammit, why didn’t i think of this as a solution? Nice job!

Jan 19, 2008 at 12:29 am

googld work!

Jan 19, 2008 at 2:52 am

Makes text mostly impossible to select/highlight. Don’t like it at all.

Segarceanu Razvan
Jan 19, 2008 at 7:18 am

Very useful and innovative!
Thank, I will use it :)

Ganesh Iyer
Jan 19, 2008 at 9:55 am

Quite neat

Erik Gyepes
Jan 19, 2008 at 10:34 am

Wow, this is really great and easy trick, thanks! :)

Paolo Bonzini
Jan 19, 2008 at 11:35 am

I used a similar trick in writing a HSV color picker. I prepared a gradient from black to transparent to white and placed it into an IMG. Whenever the user chose a color from the HS box, that color was set as the background of the IMG, creating the gradient for the V chooser.

Similarly, a single black->transparent gradient was used for the three RGB color bars (with F00, 0F0 and 00F backgrounds).

marianne mcdougall
Jan 19, 2008 at 2:30 pm

The young guys I work with at G3 Creative design in Scotland told me about this superb website – fab web tips.

Jan 19, 2008 at 2:32 pm


Jan 19, 2008 at 2:44 pm

That is absolutely brilliant, lets all hope ie 6 ends up on the rubbish heap soon. Then through the use of png web design will become a lot more fun.

Jan 19, 2008 at 3:51 pm


Jan 19, 2008 at 4:16 pm

Don’t know if I’ll ever use it, but it’s a nice trick none the less.

Ramon Bispo
Jan 19, 2008 at 5:56 pm

Guys… This is really beautiful.

Thanks a lot!


Matthew Hunt
Jan 19, 2008 at 11:57 pm

hmm… I wonder if this works with swfir
we will have to see

Jan 20, 2008 at 3:00 am

Looks cool, but as other’s have noted, it makes highlighting text very difficult. After playing with it a bit, it looks like the cursor needs to be placed right where the gradient ends.

Jan 20, 2008 at 5:57 am

great idea!
i’m wondering whether just giving the h1 itself your background image will suffice?

Jan 20, 2008 at 6:30 am

Great CSS work.

Thanks for posting.

Jan 20, 2008 at 6:53 am

Great idea! Thanks for sharing! I’ll try it out soon.

Inspiration Up
Jan 20, 2008 at 9:07 am

Nice post. I would surely use it soon..Thanks for sharing!

Jan 20, 2008 at 9:17 am

Wow! Cool tricks! То be translated into russian…


Jan 20, 2008 at 9:17 am

Thanks for a great idea! I’ll try it

Jan 20, 2008 at 9:54 am

Very useful, thanks

Jan 20, 2008 at 4:03 pm

Thanks for sharing, cool post

Jan 20, 2008 at 11:39 pm

I also came out with a cool solution to html text effects that is also SEO friendly.

Jan 21, 2008 at 2:54 am

very beautiful.
Thanks! i’ll use surely this in my site!

Jan 21, 2008 at 5:45 am

Very Cool and innovative idea i also going to follow this. This reduces the image loading problem in the web sites

Jan 21, 2008 at 6:55 am

Interesting idea. Haven’t seen something this innovative since FIR ages ago – you should ask ALA to post this for some more community dissection ;)

Jan 21, 2008 at 7:46 am

Thanks! i’ll use surely this in my site! Please help Campania…

Daniel Baroody
Jan 21, 2008 at 9:00 am

this is great. I actually did this about 2 months ago to a CMS based website where the user didn’t have the ability to alter a photo that they wanted type on so i came up with the div over the image solution to create a faded image look. sweet i feel ahead of the times!!!

Livingston Samuel
Jan 21, 2008 at 11:01 am

Wonderful effect!

I’ll defentiely put this on good use. Thanks for sharing :)

Jan 21, 2008 at 4:53 pm

very nice

Jan 21, 2008 at 5:11 pm

Looks like the same tutorial as A List Apart.

Jan 21, 2008 at 5:17 pm

Absolutely wonderful, thnx

Darren Northcott
Jan 21, 2008 at 5:59 pm

Excellent Tutorial! definately saves on load times.

IE is definately the bane of internet browsers. I have a PNG hack script for download on my website. Definately worth a look if you use alot of png’s.

Keep up the good work!

Dimitri Giani
Jan 22, 2008 at 8:28 am

Interesting idea.
For some friends, I’ve recycled your code for use it with the IEPNGFix and I’ve writted this tutorial:

I hope that this post is of interest to you and to others.

Thanks for your posts!

Jan 22, 2008 at 10:39 am

Great technique! But.. when I copied the sample address to IE.. it wasn’t displaying anything..

Jan 22, 2008 at 11:59 am

Thanks for the tutorial! I’ve only tried out the png fix portion. For anyone thats running IE7 and using a stand alone version of IE6 to browser test. I’ve found that the transparent png only displays properly in a real/installed version of IE6.

Jan 22, 2008 at 12:15 pm

this is really good. i didn’t think it was that easy…
and man, i hate IE >.<;;;

Jan 22, 2008 at 1:31 pm

Awesome tip ! Thnk you very much (again)

Jan 23, 2008 at 2:26 pm

Wow, another great tutorial! Keep up the great work!

Sarbjit Singh Grewal
Jan 24, 2008 at 7:24 am

wow, this is very smart trick.

Xavier Pimienta
Jan 25, 2008 at 6:43 am

I read your posts a time ago and I found it amazing! This post is very, very useful!

Thanks for your valuable information!


Jan 25, 2008 at 8:53 am

Thanks for the tutorial!
Keep up the good work!

Jan 25, 2008 at 9:20 am

Your site F’ing rocks! Thanks for all the great tutorials.

Jan 25, 2008 at 11:02 am

This site is the shiznit!!!!!

Jan 25, 2008 at 11:13 am

Does anyone see any reason why this wouldn’t work or would cause problems in html email?


Jan 25, 2008 at 1:04 pm

This is fantastic! Not only is it easy to implement, but it also has all the advantages of image replacement (being real text, not an image).

Franky Aguilar
Jan 26, 2008 at 4:48 pm

This is amazing. Not only do you get the awesome effect… you get to keep your text, which is great for the super spiders. Nice tut…

Dennison Uy - Graphic Designer
Jan 27, 2008 at 1:48 pm

CSS Globe has a similar article:

Jan 30, 2008 at 10:53 am

very interesting, i like the simple idea of it without editing the images with text and just have html text controlled by css, though one problem is no png support in IE6 and javascript fixes tent to slow web site down or not work when people disable their javascript. Well, when next server pack upgrade comes out then all IE6 will force upgrade into IE7 then this would be more cross browser, but the prob with this would be that it will take quite a while until everyone upgrade.

Foxinni - Wordpress Designer
Jan 30, 2008 at 12:20 pm

Wow that is cool. Will use it right away. Saving it to my delicious right now!

Damjan Mozetic
Jan 30, 2008 at 3:51 pm

Beautiful site, with beautiful content. I liked this article a lot.

marianne mcdougall
Jan 31, 2008 at 8:38 am

The design guru says – this is a well crafted and well put together website
with some really fine tutorials.

Feb 2, 2008 at 4:23 am

This rocks thanks!

Feb 3, 2008 at 4:52 pm

new? inventive? tutorial? or simply stolen?

Erik Curtis
Feb 5, 2008 at 2:18 pm

Nice effect, but not quite the same as the image sample that accompanies the article. The sample image shows a mirror image.

Working at Home Mom
Feb 5, 2008 at 2:44 pm

Thank you so much for this. I love it and am going to try it out now.

Feb 8, 2008 at 2:15 pm

Brilliant idea.

Feb 8, 2008 at 8:58 pm

why bother people? more knowledge source for everyone.. that’s what sharing means for..

David Jacques-Louis
Feb 9, 2008 at 11:07 am


Sam Hardacre
Feb 10, 2008 at 10:39 am

Great idea : )

Feb 10, 2008 at 6:15 pm

I just added this trick on my website with an orange text, and a small letter-spacing, it looks beautiful!

You can see it in the second column (the orange titles) :

Feb 11, 2008 at 4:41 am

Awesome effect! Will try out.
Thanks for sharing.
Best wishes,

mukesh marwah
Feb 12, 2008 at 1:38 am

hi its not working in IE 6.0 (png problem grey box coming over the text check it again) if you rectify this problem of png then also let me know…

all the best
mukesh marwah

Feb 12, 2008 at 2:49 am

So clear! nice! thank u!

Marc Fowler
Feb 12, 2008 at 6:48 am

window.addEvent(‘domready’, function() {
var span = new Element(‘span’);
$$(‘h1’).each(function(el) {
That’s one way of doing it for Mootools 1.1 as well, if anyone’s interested. Nice trick!!

Feb 13, 2008 at 6:57 pm

Wow man this is pretty neat and now I’m watching the live comment preview, awesome

I am always very impressed by people who own GUI related talents/knowledge. Congratulations.

Feb 14, 2008 at 3:59 pm


Feb 16, 2008 at 9:42 am

a very good design, I must say that first.
The tips are also very nicely presented, handy and good.
A very well built page, have fallen in love with the layout. Wish I knew all that it takes to create such a page.


Feb 18, 2008 at 10:39 am

Nice! I love the effect!
I think that I will try it.

Thanks! :)

Francisco (Houston Wedding DJ) Perez
Feb 18, 2008 at 11:06 am

I love this one, I will use it for sure on my new website I think that will take care of both the design of a logo it will ad a new dimension to my header.

Thanks for the great tip

Feb 18, 2008 at 5:02 pm

Or you could be the text on top, that way the text can still be selected like usual

Francisco (Houston Wedding DJ) Perez
Feb 19, 2008 at 10:18 am

The easiest one for me to do was “BLACK GLOSSY LINK” and I only implemented it on the Header, I wanted to implement another one for all the titles but, that requires more work and time or a different background (white) on my template. I’m satisfied for now with the way it came out. Just the Header is changed.


Zhao Weijian
Feb 20, 2008 at 10:15 am

hey this is really a good trick that you introduced! i will try it, but one thing i quite not ensure is that the ie6 trick, since i had tried many ways that mentioned from the internet, but none of it works, yeah, thats why we hate IE6.

btw this is my 1st visit in this site, really nice place here, really.

Tim Davies
Feb 24, 2008 at 10:13 am

Very nice tutorial
Should be helpful

Mar 3, 2008 at 1:12 pm

Wow, sweet tutorial! I LOVE CSS!!

Mar 4, 2008 at 8:23 am

Really fancy stuff.

But why should one include this for IE6? The hack is one hack to much. This technique could be another good reason for switching to a better browser. So, don’t bother on making the IE6 “shiny”.

marianne mcdougall
Mar 9, 2008 at 9:11 am

Quelques effets très bons qui si je m’obtiens à temps de mon programme fou de conception essayeront heureusement. Marianne – G3 Ecosse Créatrice

English – G3 Creative Scotland.

cha cha
Mar 11, 2008 at 10:09 pm

Very very useful, thanks a lot. I will use it at my web project

Photoshop Free Tutorials
Mar 24, 2008 at 3:03 am

Very useful trick, thanks for the info :)

Apr 10, 2008 at 2:54 am

ouuughh…that’s so cool css. can work on Mozilla FireFox?

Apr 10, 2008 at 3:02 pm

You are awesome!

Apr 17, 2008 at 5:08 pm

“IE PNG hack is required if you want it to work on IE 6.”

If I am not mistaken you can use a .gif instead of a .png for the transparent image. And you don’t need the hack anymore.

Keep up the good work ;)

Apr 21, 2008 at 8:06 am

Shefi: Good though but it won’t work! Because .gif don’t have support for partial transparency, while .png does.

But great little tutorial anyway

Werbeagentur Ansbach
Apr 24, 2008 at 1:52 pm

Super-Creative CSS-Trick.

I love it.

Ron S
Apr 26, 2008 at 7:12 am

I’ve found that this (and nearly every other variation of it) disables ClearType for the manipulated text in IE7 on XPsp2. That means we have jagged and non-antialiased text galore. And that’s the primary reason why I’m not going to use it in any of my designs.

May 2, 2008 at 9:10 am

I’m using explorer 6 (as a test browser, so don’t shoot me!) and this isn’t working. I am viewing the demos live on this page. Has the hack not been set up in these demos?

Nick La
May 2, 2008 at 11:50 am

@bdiddymc – In the demo, there is only one H1 has applied the PNG hack for IE6 – that is the H1 reading “It works on IE6 too!”

May 4, 2008 at 5:47 am

nice, the ipod example was a good one, kinda mixes with the theme pretty nicely!

Calvin Tennant
May 4, 2008 at 6:09 pm

Phenomenal. That sums it up. One thing, because the image sits over the text, links don’t work. The best hack for this that I found was to overlay a div (z-index: 2;) with spaces (& nbsp) where the text is. Probably not the best option, but the simplest. Maybe if you set the opacity option in CSS3 to zero and wrote the same text in the overlaying div. I’m not about to muck around in CSS3 until IE8 is popularized.

Let me know what you think, this example is currently displayed on

May 9, 2008 at 8:47 am

wow – brilliant!

Blue Buffalo
May 9, 2008 at 1:53 pm

Very cool CSS trick! Thanks for sharing.

May 14, 2008 at 10:05 pm

Great! Thanks you so much

web design
May 16, 2008 at 6:15 am

web 2.0 tutorial. very respectfull :)

May 16, 2008 at 7:18 am

What if you want to add the span to a li instead of h1 using javascript?

Replacing the h1 with li in your javascript didn’t work. I have jquery.

May 16, 2008 at 7:18 am

What if you want to add the span to a li instead of h1 using javascript?

Replacing the h1 with li in your javascript didn’t work. I have jquery.

May 16, 2008 at 4:20 pm

Brilliant stuff! Thanks!

May 19, 2008 at 3:24 am

Using 8-bit PNGs with alpha transparency will allow this same effect without any need for IE6 hacks. IE6 will just show the plain old text.

May 20, 2008 at 2:30 am

Thank you so much. I will use these wonderfuls in my site. But only one of them ‘It works IE6 too’ works in IE5.

May 20, 2008 at 5:16 am

can some one give the example / demo of the 8bit.. png image..

Thiago Elias
May 30, 2008 at 7:29 am

Brilhante esse tutorial..

Thiago Elias.

Web 2.0 Designs
Jun 1, 2008 at 7:30 am

Cool Articles!
Light gradient, large text, bright colors. It’s all about Web 2.0 trend.

Jordy Wouters
Jun 2, 2008 at 6:00 am

Give me more web 2.0 stuff! I love this because i use al kind of shiny gradients for my designs. Also good for some html/css

Jun 3, 2008 at 6:02 am

Excellent as usual…. :)

Jun 3, 2008 at 1:00 pm

The best ideas are the simplest.

Very cool indeed.

Jun 5, 2008 at 10:20 am

A collection of cool copy and paste Text Gradients Effects. Create with you own text.

All you have to do is

* Type in your text
* Copy the code at top
* Paste them anywhere below head tag.
* Now copy the code found in the text area below the text font you want
* And paste it in you site anywhere below body tag where you want them to appear.

Jun 5, 2008 at 10:22 am

I did this to make your css more useful and comfortable for everyone to use. All credit to you.


CSS 2.0 effects
Jun 6, 2008 at 12:29 pm

I love this article, cool CSS effects for headings… :)

Jun 7, 2008 at 4:20 am

Very useful css tip, especially for people don’t want to use flash in their websites .. a very good solution and is easy to implement! thank you

Jun 9, 2008 at 3:41 pm

Thank you for this one. Very neat trick, wonder what goes on behind the scenes.

Jun 11, 2008 at 1:00 pm

well done.

uk website designers
Jun 12, 2008 at 10:24 pm

i love this, things are moving so fast these days, now i can make sites that use only css in the header.

Best Designs
Jun 13, 2008 at 11:54 am

It will help designers to create best designs for web 2.0 layouts.

Jun 13, 2008 at 7:06 pm

I just love this theme is it available and is it 2.51 compatible??

SEO - Search Engine Optimization Philippines - Perth Australia
Jun 14, 2008 at 8:57 am

Thanks for a great post!

Jun 14, 2008 at 9:04 am

Thanks , Nice tutorial

e devlet
Jun 17, 2008 at 1:01 am

css background examples , Properties , Attribute – –

Jun 19, 2008 at 2:44 am

this css doesnt work in IE / Netscape browsers

Jun 19, 2008 at 2:55 am

you forgot to mention the div on top of the text that sources the background image

Web 2.0 Expertise
Jun 20, 2008 at 10:55 am

Great Articles on site, it will help to create web 2.0 layouts.

örnekleri dersleri
Jun 23, 2008 at 2:27 am

HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out

soccer picks
Jun 25, 2008 at 5:35 pm

Wonderful effect! I’ll defentiely put this on good use. Thanks for sharing

Web 2 Development
Jun 28, 2008 at 9:34 am

Awesome tricks on this site, this is also part of web 2, sharing your knowledge…:)

Affordable Web Design
Jun 28, 2008 at 6:27 pm

Oh how wonderful this tutorial is, lol! Great stuff, you can bet yourself I’ll put this to good use. Is this compatible across browsers?

Karl Hardisty
Jul 3, 2008 at 5:14 am

The power of CSS coming to the fore, at last. Some very good examples here; even more so when one takes into account that they work in Internet Explorer.

Thank you for the collection – very educational.

Antonio Ciccarone
Jul 6, 2008 at 5:29 pm

Some of the comments people leave are so stupid. I love the code and idea behind it, but have found it to work only when the conditions are right. Thanks for the snippets and awesome site. Especially this comment preview, that’s hot.

Jul 6, 2008 at 9:19 pm

This is one of the best CSS tutorial I found.

Colin Miller - Freelance web designer
Jul 9, 2008 at 2:22 am

Wow! I like this a lot. I never realised you could do so much with a transparent .png – Worth exploring further! Excellent

Jul 14, 2008 at 8:08 am

Excellent tutorial.

Web 2 Development
Jul 15, 2008 at 12:19 am

Great effect! This is common trend for web 2 sites….!

Jul 16, 2008 at 3:32 pm

very vey very nice
you did it very well
i loved it

real estate postcards dude
Jul 17, 2008 at 1:07 pm

This is so sick!!! Right on!!! I had no idea anything this could be done. And best of all the code is simple and clean.

Keep em coming!!


People Search Dude
Jul 18, 2008 at 1:15 pm

right on! nice one!

Business Oceans SEO Consulting
Jul 18, 2008 at 1:30 pm

The best part about the CSS coding is the bandwidth savings.
Nice enhancement with just a little extra love added!


Jul 19, 2008 at 1:08 am

Great! I’ve been looking for something like this for awhile, it will save me a lot of time if I choose to use this.

Jul 20, 2008 at 12:12 am

you are so generous! thanks for sharing these great ideas along with all the details necessary to actually use them

best web design
Jul 20, 2008 at 10:05 am

Good effect…:)
Thanks for giving nice tips on all useful stuff.

Asep Sumardi
Jul 25, 2008 at 10:44 am

thanks man ! this very cool

Jul 25, 2008 at 12:18 pm

A collection of cool copy and paste Text Gradients Effects. Create with you own text.

All you have to do is

* Type in your text
* Copy the code at top
* Paste them anywhere below head tag.
* Now copy the code found in the text area below the text font you want
* And paste it in you site anywhere below body tag where you want them to appear.

I did this to make your css more useful and comfortable for everyone to use. All credit to you.

Marta -
Jul 27, 2008 at 3:05 pm

Hi, I like this idea, but I’m having trouble to make it working in WordPress. Could you share some tips on where actually put this code into? I was trying in page.php for page headers but it wasn’t showing up. I would be grateful for any tips, thanks.

Eat Izmir
Jul 31, 2008 at 1:10 pm

Great tips thank you very much for the information

reliable IT solution
Aug 9, 2008 at 10:24 pm

Thanks for png fix for IE6 in last post, perfect solution for web designers.

hotq uehqm
Aug 10, 2008 at 8:56 am

hpafoy cqnxe aulem fnpz yzguwjbf fmhleixk hbruqxnmk

Aug 16, 2008 at 11:43 am

Great effective
Thanks a lot!


Begginer Web Designer.

Create Sean
Aug 16, 2008 at 9:11 pm

Wow! this is a really great tutorial – will definitely be using this.

Aug 18, 2008 at 1:48 pm

thanks.. i will be trying this out on my redesign.

CSS Model
Aug 23, 2008 at 4:19 am

Really like it. Very clearly explained. Thanks!

Aug 25, 2008 at 1:55 am

nice article

Aug 27, 2008 at 4:12 pm

Thank You! An excellent way to add graphical quality with minimal time overhead.

Aug 29, 2008 at 4:27 am

Thank you! :) I will try it!

Aug 29, 2008 at 12:39 pm

i wanna learn to costumize my own blog. Something different from any other blogs which really shows my personality. I want a layout that is more catchy a retro style…how can i do it? Can you help me? this is my blog actually,–this is just new, very very new.

thanks a lot

Aug 30, 2008 at 11:32 am

Great effective.Thanks

Sep 3, 2008 at 9:43 pm

Apparently it’s much more easier than using flash content to replace texts……
nice idea!
Could you allow me to translate this article into Chinese and post it onto my own site? (

Fahd Hamad
Sep 12, 2008 at 7:54 pm

I really found the IE6 PNG hack very useful,


David Churchyard
Sep 22, 2008 at 4:54 am


Exaples don’t work for me! IE 6.0.2900

Text is hidden by gradient

Sep 24, 2008 at 2:25 pm

Pierwszy koment

Sep 25, 2008 at 2:31 pm

David that’s cuz you’re using a shit browser.

tjpeo odcwfalu
Sep 28, 2008 at 1:22 am

ubfprdcye csldbzmxu zwpcehi ntdy foimr lpwc fjzchxso

Sam Parkinson
Sep 28, 2008 at 11:32 am

Shoot that’s good CSS, selecting the text is a bit abnormal though.

Oct 11, 2008 at 3:12 pm

Another great post from this page, thank you!

Web Designer
Oct 11, 2008 at 4:18 pm

This is an amazing trick! I would still rather create the image for compatibility, rather than fighting with different browsers

Oct 14, 2008 at 12:42 pm


Oct 23, 2008 at 11:18 am

that’s great trick, but how to do the same for navigation for example, with tags ?

Oct 23, 2008 at 11:21 am

tag didn’t show up, I meant with: li tag

Jesse Donat
Oct 23, 2008 at 6:47 pm

Might be worth noting that the PNG hack isn’t necessary in IE6 if you use an 8 bit alpha blended PNG (which FIreworks can generate, but Photoshop can not…)

Nov 20, 2008 at 2:16 am

Thanks a lot
Very fun

Nov 21, 2008 at 11:56 pm

Nice ver NICE
this should help me lot

Best Online Classifieds
Nov 24, 2008 at 10:03 am

Best lessons learned here. Thanks a million. We recommend this website to all.


vipin vashisht the website designer
Dec 2, 2008 at 2:37 am

This the great trick to give the gradient color in text with css.

Dec 3, 2008 at 10:54 pm

This is an amazing trick!

Dec 4, 2008 at 12:43 pm

Great post… excelent…!!!

Carlos Hermoso
Dec 11, 2008 at 7:57 am

This is actually really useful. Thanks

Dec 18, 2008 at 6:15 pm

tag didn’t show up, I meant with: li tags

Dec 31, 2008 at 4:42 pm

Brilliant technique. I will use this in future projects for sure!
Jan 1, 2009 at 9:37 am

Yeah, this is a pretty cool wee effect. Its simple, it works and its another nice wee tool for the arsenal.

Car Wallpapers
Jan 3, 2009 at 2:18 pm

Awesome, Thanks!

Jan 7, 2009 at 3:39 am

Looks great!
Thanks for sharing, love the demo page, gonna try the demo zip immediately.

Jan 22, 2009 at 11:17 am

thanks admin

Austin Web Design
Jan 22, 2009 at 10:51 pm

This is a very cool idea. My only problem is the cursor goes a little funny. You can select and copy the text if you put it beneath the gradient image, but it took me a second to figure that out. When I first put my cursor on there, it stayed as the arrow, so I was (mistakenly) thinking “why did they use screenshots for the demo??”

Bill Ortell
Jan 26, 2009 at 2:55 pm

Well put, i introduced using png layers on html to many of my members and very few have taken it seriously, it’s nice to see that you’ve even taken the whole idea to a new level.

Literally, you can customize an enitre HEADER/FOOTER/MINISITE doin this sorta stuff :).

Well, done – and LOVE your site.

Jan 30, 2009 at 9:32 am

This is great, except the IE hack doesn’t seem to work. I’m looking at your page even in IE6 and the PNG is covering the words. Did I miss something?


Feb 14, 2009 at 3:18 am

I am new to css and web design in general. I’ve spent about 3 hours on this so far and keep coming up with the same problem: the png gradient is resting above the text rather than on top of it. It appears to not want to occupy the same space. Any help would be greatly appreciated. Love the idea!

Feb 19, 2009 at 12:59 pm

Thank you for this one! Any variation with fonts/text is great

Feb 25, 2009 at 6:11 pm

Thx! I know this hack, but i dont know about IE6 fix… thx!

Mar 2, 2009 at 8:22 pm

Hey folks,

this is amazing!
Thx for this.
Check out worlds most innovative OpenSource Content Management System concrete5!

Mar 5, 2009 at 7:05 pm

thank you man it’s owseome

Mar 6, 2009 at 2:52 pm

If I don’t follow the hack for IE 6, what will the text look like? And for that matter how about other browsers? It’s great for those browsers that support it, but I want to make sure the text is at least readable for those that don’t.

Mar 7, 2009 at 6:46 am

Great tutorial, found it very usefull…

Mar 12, 2009 at 3:16 pm

i think gradient is more effective in flash

Mar 18, 2009 at 12:09 pm

great post. very useful information for me.

Mar 20, 2009 at 12:54 pm

Thank you This is great, except the IE hack doesn’t seem to work. I’m looking at your page even in IE6 and the PNG is covering the words. Did I miss something?


rent a car
Mar 20, 2009 at 12:55 pm

I’m looking at your page even in IE6 and the PNG is covering the words. Did I miss something?Thanks!

arac kiralama
Mar 20, 2009 at 12:55 pm

this is amazing!
Thx for this.
Check out worlds most innovative OpenSource Content Management System concrete5!
Cheers …

oto kiralama
Mar 20, 2009 at 12:56 pm

great post. very useful information for me.

Mar 20, 2009 at 8:13 pm

Wow, that’s so simple and nice! I can’t wait to use it on my blog.

web designer - dave calvert
Mar 23, 2009 at 7:45 pm

pretty damn cool ………

Mar 26, 2009 at 3:25 am

Excellent! I like it

Silver Knight
Mar 26, 2009 at 6:46 am

Very nice! Dead simple to implement, and very classy looking end result. Thanks much for this tip. Only wish I had thought of it. Pure genius! :)

Estetik klinikleri
Mar 30, 2009 at 2:14 am

thanks for this usefull information. have a good work.

sinema bursa
Apr 1, 2009 at 8:49 am

thanks you good article. nice sharing.

theme download
Apr 7, 2009 at 2:01 am

thanks for article.ı searching it.

Apr 7, 2009 at 4:42 am

nice article.thanks.

Apr 13, 2009 at 4:49 am

Very informative page about CSS Gradient Text Effect. Tanks for sharing the info.

Apr 22, 2009 at 2:16 pm

very nice thank you

Mark Reilly
Apr 23, 2009 at 5:13 pm

Great tutorial. I have used this on one of my sites and I am very happy.

One suggestion is to use PNG8 rather than PNG32 for your transparencies. You have to use Fireworks rather than Photoshop to get this to work properly. As Fireworks supports alpha transparency in PNG* and PS only supports index transparency (i.e. same as GIF transparency) See this article for more detail:

More hassle but this has TWO significant advantages: Smaller file sizes, and you don’t need to use the IE6 alpha filter, IE6 treats it like a PNG8 index transparency it just doesn’t show it. The Alpha Filter is not standard and is very intensive and slows down IE6 especially as it is called for each single PNG image. This way your site degrades gracefully, you don’t need to worry about removing the filter when IE6 finally dies. I use PNG8 for all my transparent images.

Apr 25, 2009 at 12:35 am

Such a cool effect!
Thanks for sharing.

Apr 27, 2009 at 10:23 am

thank you sharing

Apr 27, 2009 at 10:37 am

thank you, very nice text efect

Hosting Companies Review
Apr 28, 2009 at 12:01 pm

Wow! This is something new.

This will be useful for turnkey sites. People can easily create a cool looking logo without even touching an image editor.

Great Job! :)

Apr 28, 2009 at 9:22 pm

It don’t work on IE6, why is it. HELP ME !!!!. I’m very like it

Nathan Nash
May 4, 2009 at 6:57 pm

great! I’ve been looking for a way to implement something like this into my website. code > images.

Mike Schinkel
May 9, 2009 at 4:23 pm

This was exactly what I was looking for,…except you didn’t explain how to create the “1px gradient PNG (with alpha transparency) (and I alread knew how to do the other part. :-)

Seriously though, I’m probably out of your demographic (I’m a coder not a designer) but if you could add an update on how to quickly create that 1px gradient PNG (with alpha transparency) I would appreciate and so possibly would other coders who find this via Google. :-)

May 11, 2009 at 11:49 am

Interesting idea. But it appears to have an unstated limitation: the PNG transparency must be the same color as your background. So you can’t, say, have a medium grey font, a white background, and a black gradient on top. There’s nothing that “masks” the PNG to the text.

I would love to figure out how to do that, though.

gaziantep evden eve taşımacılık
May 13, 2009 at 4:26 am

thanks you

Simple Station Web Design
May 13, 2009 at 10:03 pm

This was a good example of using gradients in web design but I’m not sold on the approach. As Adam mentioned it doesn’t degrade well to IE6 and without using Dean Edwards hack I’m not sure it would even display on a webpage.

Carl - Web Courses Bangkok
May 14, 2009 at 1:01 pm

This is a great method thanks. I`ve always wanted to do something like this and its such as simple method!


Flash Buddy
May 20, 2009 at 4:01 pm

So simply clever and cleverly simple. I’m a fan!

May 21, 2009 at 4:58 pm

thanks.. nice script

Araba Resimleri
May 21, 2009 at 4:59 pm


May 28, 2009 at 7:18 pm

It’s hard to select text, but maybe a good trick if you just want some (real) text with a gradient

Nikhil Verma
Jun 8, 2009 at 7:37 pm

Very good method to teach with examples and cool designs of web pages..

send me feedback.

Jul 7, 2009 at 7:18 pm

hi, how to fix for backgrounds? i want a the following div with overlay
div#head{ height: 222px; border-bottom: 5px solid #333; background: #C36;}

Jul 20, 2009 at 5:03 pm

That’s pretty cool, but it’s not very bulletproof. As soon as you enlarge the type, everything gets misaligned. Too bad you can’t mask the overlay like in Photoshop.

Andrea Hill
Jul 21, 2009 at 11:53 am

My biggest concern with this approach is that the text is not selectable with the mouse.

Fred Campbell
Jul 28, 2009 at 4:13 am

Sweet. I’ve seen a few approaches to this problem, but this is by far neatest piece of code – thanks for sharing.

Aug 8, 2009 at 1:32 am

what if we r using corel paint shop x2

Aug 9, 2009 at 10:36 am

This was a good one… :) Thanks… I love it, and your website sure is cool…

Aug 13, 2009 at 11:58 pm

If an imge is still required in CSS, why not creating the entire text as an imge???
This CSS is useless EXCEPT you do NOT need to use any image.

Aug 15, 2009 at 1:22 pm

jack the fool just doesn’t get it…
the main idea here is that the image is reusable for any other texts without editing in Photoshop…

Aug 18, 2009 at 1:31 pm

the only issue is the heading text is not selectable anymore…

Guy who tested
Aug 26, 2009 at 3:12 am

Effect didn’t work with Opera. Gradient didn’t show up on text. Fixed it by setting span’s z-index larger than h1-element’s. For example:
h1 { z-index: 10; } span { z-index: 20; }

Sep 4, 2009 at 9:23 pm

Haha. cool skill. I love it.

Allain Lalonde
Sep 7, 2009 at 3:27 pm

That’s really smart. I’ll be using this idea soon.

Sep 10, 2009 at 7:50 am

How do I use this in WordPress site ???

Sep 10, 2009 at 7:39 pm

exciting tips.

Sep 11, 2009 at 3:00 am

Very very inspiring css technique i m very inspired.. thnkx friends..
keep posting nice css techniques..

Sep 12, 2009 at 5:30 am

Wow! Very clever. Now I know why I’m seeing texts which have a gradient effect, I thought they were just pure image. Thanks

Sep 12, 2009 at 8:38 am

Thanks for sharing, helped.
Might be interesting:

Sep 21, 2009 at 9:54 am

Great , CSS Gradient Text Effect
Great article. CSS saved web design

Sep 29, 2009 at 2:55 pm

Great tutorial here is how the javascript should be written to avoid any compliance bugs.

//prepend span tag to H1
// -->

Oct 9, 2009 at 7:21 am

Your site flashes whenever I use the firefox 3.5.3 scrollbar. Quite annoying.

Oct 15, 2009 at 4:09 am

It is so gay to use iPhone as a demo.


Oct 25, 2009 at 1:45 pm

Nice efects ;)

Oct 30, 2009 at 6:16 pm

It doesn’t work in IE6 at all!!!

Oct 31, 2009 at 4:51 am

Really useful skill

Nov 6, 2009 at 4:05 pm

What a wonderful thing to try out!

I guess it would work much better on black, than most other colors. Took me a minute to figure out how it worked, but I like the blank span just fine.

Nov 18, 2009 at 11:32 am

It doesn’t work in IE6 at all!!!

Nov 19, 2009 at 11:50 pm

Create fancy headings in really very interesting work. I found your post useful and now I m using it in my 83-640 website.

Basic Websites
Dec 8, 2009 at 1:03 pm

Excellent stuff, I’ve previously accomplished this using graphics programs, this is a much more elegant way of doing things. Shame about the IE hack…but hey it wouldn’t be IE without hacks would it?

patik modelleri
Dec 17, 2009 at 4:57 pm

buraya birseyler karalamak gerekiyor ama tam olarak ne yazacagimi bilmiyorum.

Dec 22, 2009 at 2:19 am

sweet sweet ;-) thanks for sharing

Dec 25, 2009 at 10:54 am

Very Nice article Keep going on

Jan 4, 2010 at 9:47 pm

xdas as


Jan 5, 2010 at 11:35 pm

The designs showed here show what simple and tasteful design is all about. Another one to consider

Jan 9, 2010 at 5:45 am

Stunningly simple. Thanks, I’ll be using this with the jQ prepend.

crowdsourcing website
Jan 15, 2010 at 2:17 am

interesting headings yet very simple codes… will be using them for sure.

psd xhtml
Jan 17, 2010 at 3:35 pm

it is funny work for ie6, ie5 and ie5.5

Nissa Askew
Feb 17, 2010 at 11:39 pm

Great tutorial. I will definitely be trying this out.

Feb 19, 2010 at 8:29 am


very cool :d

Trim Qemali
Feb 23, 2010 at 2:37 pm

Wow this is one of the most interesting CSS stuff i have ever seen. Thank you for this tutorial, i will implement some of you examples on my sites.

shoaib hussain
Feb 24, 2010 at 9:22 am

this is just awesome,and is really so simple.thnx a lot

santiago pilgerweg
Mar 2, 2010 at 8:41 am

cool Trick!
gonna use it soon … :-)
thanks for posting!

Mar 6, 2010 at 7:37 am

its nice!!!

Mar 8, 2010 at 1:39 am

its awesome…I didn’t expected that it could be done with CSS.!

Mar 31, 2010 at 2:26 pm

I just got done saying that it couldn’t be done without rendering everything in Photoshop ahead of time. Then I Googled and found your site.
Thanks so much for this tip and I like the jQuery prepend addition. That was the icing on the cake.

Apr 3, 2010 at 9:03 pm

Muito bom, realmente deixa o site mais leve.

Thiago Holanda
Apr 4, 2010 at 3:27 pm

Congratulations for this trick! It’s really cool and easy to use.

Apr 5, 2010 at 3:46 am

I have found this site recently and I am really surprised by the number of excellent lessons. thank.(clapping)

Apr 28, 2010 at 11:41 am

could you tell me how i could apply this to a multi-line phrase? for example:
text text text text text text text text text

Apr 28, 2010 at 11:43 am

oops is stripped my code.
multi-line p tag with hard returns using br tags. i’ve been trying for a while and can’t seem to figure it out…. thanks!

Web Design
Apr 28, 2010 at 8:35 pm

so simple !! thanks

May 8, 2010 at 10:48 pm

Since “h1 span” is given a height of 31px, are we assuming then that all text this will be applied to will be 31px tall? Or would any height larger than the text work?

May 15, 2010 at 10:40 pm

It’s better if you use a image of the same height of text, and put 100% in the span height, then the gradient would be visible if you enter a new line or if your title is bigger than it’s container

Seth Carstens
May 20, 2010 at 12:48 am

How the irony sets in when you notice that all the samples on this website are IMAGES instead of CSS. way to go genius.

ipad apps
May 21, 2010 at 10:11 pm

CSS can achieve the effect of flash is indeed a cool technology

Abdul Wakeel
May 30, 2010 at 1:49 pm

I want to change the backgroudn color of this page
Any one can help me out

Jun 5, 2010 at 11:10 am

wow….really awesome…
this can also be used as a simple trick to make the text non-selectable.

Phil Doughty
Jun 12, 2010 at 3:53 pm

Nice effect –
If the screen was stretched/enlarged
and the text stretched also with it would the
image do the same?
or would there be BIG TEXT with a small image?

Jun 16, 2010 at 1:34 pm

Nice ..!!

thanks Man ..


Jul 6, 2010 at 11:05 pm

Thank you so much ..
You are very cool

TV apps
Jul 11, 2010 at 10:15 am

Thanks for a very useful tips!!

Jul 23, 2010 at 9:15 am

thanks for posting such an interesting study..

Aug 6, 2010 at 5:20 am

This is very beautiful idea!!!!

Aug 15, 2010 at 12:20 am

not work with me :(

Aug 18, 2010 at 3:31 am

Woow.. You are cool…
Beautiful text.!
Thx for posting..

Dorian Muthig
Aug 25, 2010 at 12:51 am

That sure looks nice, but the text will no longer be selectable, because a floating object is covering it. Also, the behavior for the already closed tag is wrong, as it should not extend accross the parent object. As such, it is a bad idea to do that. Using the proprietary filters filter: progid:DXImageTransform.Microsoft.gradient (IE) or attributes -moz-linear-gradient and -webkit-gradient (Gecko/WebKit) is a far better solution as it may also save on HTTP requests.

Aug 27, 2010 at 9:35 am see my site nd enjoy

denizli oto kiralama
Sep 5, 2010 at 10:25 am

good code thanks

Sep 13, 2010 at 5:35 am

wow, what’s a useful skill.

Thanks to share.

Sep 19, 2010 at 6:45 am

fantastic tutorial i want permission from you to translate it and but it in my site and sure ill redirect it to the source

Sep 28, 2010 at 4:17 am

Brilliant tutorial. Thank You ! :)

Badrun Tralala
Oct 1, 2010 at 10:04 pm

Very useful tutorial.. thanks…

Oct 14, 2010 at 6:15 am

see my webiste i hope u wil see nd enjoy

Manoj Rathore
Oct 15, 2010 at 8:42 pm

This is very helpful and amazing

Brett Widmann
Oct 24, 2010 at 6:48 pm

:D This is lovely! Thanks for the post.

sana 18f
Oct 25, 2010 at 9:20 am

hi,visit my site if u want my cell number thnx.

[email protected]

Nov 9, 2010 at 6:56 am

very cool – and very easy to follow- thanks!!

photoshop stuff
Nov 17, 2010 at 3:15 am

Great tutorial, makes very stylish headings! Thanks.

Nov 17, 2010 at 4:39 am

Great posting, thanks.

hcg wholesale
Nov 18, 2010 at 10:47 pm

Thanks for sharing this info!

Nov 23, 2010 at 7:42 am

Nice tutorial but the css only works good on white or black background (selected backgrounds). I guess there is no way in css to fill the gradient in actual characters instead of bg or is there ;)

Dec 1, 2010 at 4:22 pm

very nice trick! thanks for sharing!

Dec 7, 2010 at 5:07 am

excellent post. Thanks for this

Dec 13, 2010 at 12:22 am


Devall Krem
Dec 13, 2010 at 6:36 am

very cool – and very easy to follow- thanks!!

S Smith
Dec 14, 2010 at 4:32 pm

I was a little narked when I found this. I’m a pedant and I’m afraid that “Pure CSS” shouldn’t include an image, at least that’s my opinion. So I set out to see if I could do it “properly” :)

background: -moz-linear-gradient(top, rgba(27,67,98,255) 0%, rgba(27,67,98,0) 100%);

if you replace the background image with the gradient as above, where 27,67,98 is your element background-color, it works just as well. (You’ll have to check out the options if you don’t use firefox)

Dec 21, 2010 at 2:24 am

Your article’s resource box should help to persuade your readers. No matter how amazing your article is if it’s not succeeding in driving traffic to your website cheap uggs

Juno Mindoes
Dec 23, 2010 at 10:42 pm

Though white iphone 4 is at high price, but with all-powerful function, we can see lots of people just crazy for the latest white iphone 4.

Henry Peise
Dec 24, 2010 at 9:12 pm

Today I have done a camera shootout with the white iPhone 4, the iPhone 3Gs and the iPhone 3G.

Uçak Bileti
Jan 11, 2011 at 4:59 pm

css graidentler fark veriyor

Jan 13, 2011 at 1:46 am

lovely .. thanks for sharing..

Jan 18, 2011 at 4:03 am

how can use it working properly for IE6 browser

Robert Steers
Jan 20, 2011 at 4:12 pm

Excellent tutorial. These gradient effects are so useful!

Brandon Wright
Jan 22, 2011 at 10:14 am

I love this! Thanks :-)

Kenny Rogers Plastic Surgery
Jan 25, 2011 at 2:38 am

Wow great CSS effect. I will try on my site. You can check soon :)

Jan 26, 2011 at 12:43 pm

nice scripts,please share the new effects with html5

Jan 31, 2011 at 5:15 pm

This isn’t a “pure CSS” solution. You can achieve this effect in modern browsers without the PNG overhead.

formula 21
Feb 1, 2011 at 7:15 am

Excellent tutorial. These gradient effects are so useful!

altın çilek
Feb 2, 2011 at 7:26 am

Thanks !!! Very usefull !!

altın çilek
Feb 2, 2011 at 7:30 am

nice scripts,please share the new effects with html5

hcg damla
Feb 2, 2011 at 1:17 pm

lovely .. thanks for sharing..

hcg damla
Feb 2, 2011 at 1:21 pm

This isn’t a “pure CSS” solution. You can achieve this effect in modern browsers without the PNG overhead

Feb 3, 2011 at 5:44 am

This isn’t a “pure CSS” solution. You can achieve this effect in modern browsers without the PNG overhead.

Feb 4, 2011 at 7:16 am

Wow great CSS effect. I will try on my site. You can check soon

sabina lamichhane
Feb 21, 2011 at 3:52 am

well plastic surgery is a very high type of treatment. it is done in the case of burn a deep cut etc. plastic surgery makes the skin look natural and hides any type of wound on your face or other part of your body. and it does not have much more effect aswell.
URL of your blog post
Kenny Rogers Plastic Surgery

hcg damla
Feb 25, 2011 at 12:29 pm

Thanks !!! Very usefull !!

Feb 25, 2011 at 6:20 pm

Using a transparent PNG overlay is a nice and relatively low-overhead way of creating a gradient or glossy effect. But CSS 3 offers us easier alternatives which are supported in the Safari, Chrome, and Firefox browsers. -moz-linear-gradient and -webkit-gradient will do almost as an effective job without requiring one to tinker with creating a png image. It would have been nice if these CSS3 standards had come to us a few years ago. CSS3 makes web design much easier. I used a PNG to make a kind of a glossy background and did not need to use positioning to do it.

Feb 26, 2011 at 5:15 pm

Omigosh this has got to be the prettiest webpage I’ve ever seen! I was almost too distracted by it’s beauty to grasp the info lol … but thnx so much for the help!! :D

Mar 11, 2011 at 4:54 am

that’s a nice effect. I’ll use it for my website.
Thank you very much for sharing!

Mar 12, 2011 at 6:04 am

Thanks !!! Very usefull !!

Mar 12, 2011 at 6:05 am

Wow great CSS effect. I will try on my site. You can check soon

Mar 12, 2011 at 6:06 am

lovely .. thanks for sharing..

How To Put On A Condom | How To Get Taller
Mar 17, 2011 at 5:24 pm

Now I know how to create fancy headings without rendering each heading with Photoshop. Thanks!!!

How To Get Taller | How To Put On A Condom
Mar 17, 2011 at 5:25 pm

CSS trick you showed does work! Amazing!!

Mehboob Talukdar
Apr 8, 2011 at 4:32 am

It’s amazing .. thanks for sharing..

Desarrollo Web
Apr 12, 2011 at 7:33 pm

cool, thanks for the demo.

Apr 17, 2011 at 1:51 pm

Excessive fear, anger, and work under stress last pregnancy, infants can lead to excessive hassaslığa. Intense emotions, going through the mother’s blood circulatory system and brain functions that affect the baby in some leads to the release of chemical

Apr 19, 2011 at 2:44 am

you cane use “h1:after” in place of “h1>span” (for semantic maniacs)

Apr 20, 2011 at 3:46 am

crap, the text is not selectable anymore

Apr 23, 2011 at 2:46 am

“Excessive fear, anger, and work under stress last pregnancy, infants can lead to excessive hassaslığa. Intense emotions, going through the mother’s blood circulatory system and brain functions that affect the baby in some leads to the release of chemical”

Probably why Marijuana needs legalized – For a healthier baby.

Cancerous Moles Pictures
May 4, 2011 at 3:24 pm

Hi there, I discovered your blog via Google even as searching for a comparable matter, your web site got here up, it appears goodI’ve bookmarked it in my google bookmarks.

May 11, 2011 at 8:55 am

Cool! Thank you for the wonderful tutorial…:-)

May 12, 2011 at 1:41 am

Cool jqery effect .Loved it

May 13, 2011 at 8:38 pm


May 17, 2011 at 5:26 am

unfortunately this doesn’t work for me. I’m using Firefox 4.0.1 and I tried that jquery version (with jquery 1.6.1 min). I only see a wide gradient rectangle, title text is behind it (invisible). Then I even copied the code from here, but still the same awful result.

May 19, 2011 at 3:05 am

hmmmm….. good keep it up dear………

laser teeth whiten
May 27, 2011 at 4:44 pm

Outstanding speech Thank you . brb

iTechWhiz- Technology News, Reviews, Articles, Tips and Tutorials
May 28, 2011 at 10:21 am

These are some wonderful CSS text animation tutorial and tips by you indeed.

Jun 9, 2011 at 2:24 pm

This is decent but one large issue…the gradient is depicted by the background color of the h1 parent :(

Jun 28, 2011 at 1:06 pm

I can’t seem to get it to display correctly in IE7, could you provide an idea as to the CSS rules that need to be looked at please?

The top navigation uses this technique at

Thank you very much,


Jul 8, 2011 at 3:35 am

Information is helpful to learn a lot.

Jul 20, 2011 at 6:55 am

its very useful

طراحی وب سایت
Jul 29, 2011 at 12:33 am

its very useful

Aug 23, 2011 at 2:01 pm

And then he handed you the thirty-five 45

Jul 31, 2011 at 1:59 pm

I wanna download photoshop but i don’t know how? Can some one send me it on skype “aysel_mega”

Aug 5, 2011 at 5:40 am


Jul 31, 2011 at 9:50 pm

Thx. The information is very interesting. Can be used practically.

Aug 2, 2011 at 12:40 pm

I tried to apply this to my blog’s title but I can’t make it work. I don’t understand what I’m doing wrong.

I uploaded the PNG files to /wp-content/themes/graphene/css-gradient/images

I added the following to my CSS file :

.header_title span {
background: url(css-gradient/images/gradient-white.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;

Does anyone have an idea what I’m missing?

Aug 7, 2011 at 1:08 am

Try putting quotation marks around the image source.

Abdul Wahhab
Aug 4, 2011 at 3:38 am

Though we do not prefer testing websites on IE6 since Google has stopped supporting!! and on the other hand I wouldn’t prefer using any fixes it leads the browsers to crash sometimes :/… and thanks for the useful tool… :D

Aug 11, 2011 at 11:18 am

Nice, but how do you make those images? I’ve been trying for an hour, with Photoshop.

xbox 360
Aug 25, 2011 at 10:13 pm

so far so good

Aug 26, 2011 at 12:29 am

awesome. easy to do

Aug 28, 2011 at 8:28 pm

Elegante, bem bacana mesmo!

Mon Aquino
Sep 2, 2011 at 3:09 am

If you don’t have photoshop, try this to create the gradient. :)

but i think its possible also to create this effect using the -moz-linear-gradient in css by using another .

Sep 3, 2011 at 6:18 pm

Ha sido muy util.. Merzi.


Sep 11, 2011 at 12:15 am

Ha sido muy util.. Merzi.

Oct 5, 2011 at 10:44 pm

Great information, it’s useful

Oct 9, 2011 at 11:13 pm

good job….very helpfulllll

696 Clothing
Oct 16, 2011 at 7:16 pm

Very nice tutorial. I’ve been looking for this to make my post title blends with the template concept. Thanks alot.

Oct 19, 2011 at 4:37 pm

Nice one … bookmark

Krishna Kumar
Oct 20, 2011 at 4:06 am

Amazing Trick…..

Oct 24, 2011 at 4:49 am

Great information, it’s useful

Oct 24, 2011 at 5:41 am

Nice, but how do you make those images? I’ve been trying for an hour, with Photoshop. Thankyou for post

Oct 25, 2011 at 3:11 am


Nov 13, 2011 at 11:30 pm

Nice! Tutorial.. Thank a lot this tips helpful for me.

Nov 15, 2011 at 3:29 am

Nice! Tutorial.. Thank

Nov 22, 2011 at 2:50 am


Maryland SEO
Nov 22, 2011 at 9:28 pm

I really love all the new CSS features. Make’s websites a lot more dynamic and interesting for a viewer. I plan to use a few of these tricks on my next site.

Nov 23, 2011 at 9:58 am

this is realy nice one thanQ

Nov 24, 2011 at 1:16 am

Nice tutorial thnx fr d help ;)

Thomas | Website Design Durban
Dec 1, 2011 at 5:34 am

Been searching high & low for a simple CSS tutorial like this. TX!

Small Dog Breeds
Dec 1, 2011 at 1:33 pm

Thank for Tutoria, I’m studying CSS.

Freelance Artist
Dec 8, 2011 at 12:09 am

Awesome tutorial! I’m using the gradient effect on my H1 tag and it works like a charm. Thank you!

What to buy for christmas
Dec 8, 2011 at 1:03 am

Thank for Tutoria, I’m studying CSS.

Best Television Price
Dec 8, 2011 at 1:04 am

Nice! Tutorial.. Thank

Best BlurayDiscPlayer Price
Dec 8, 2011 at 1:05 am

Awesome tutorial! I’m using the gradient effect on my H1 tag and it works like a charm. Thank you!

Dec 9, 2011 at 6:23 am

The drawback is that you MUST use neutral backgrounds.
Which is quite a massive drawback

Dec 11, 2011 at 5:43 pm

Thanks for the great tip! I was looking for CSS font formatting tips but came across this instead. Better than what I wanted. Great find. :)

Dec 11, 2011 at 5:48 pm

mm…it doesn’t work if the h1 text has more than one row

Dhanesh T S
Jan 19, 2012 at 7:03 am

Awesome tricks….!!

spring valley vitamins
Jan 20, 2012 at 4:37 am

definitely, a BIG BIG deals.thx, for article

Jan 27, 2012 at 4:44 pm

so the text i want to have a gradient effect is sat ontop of another image. can i still do this?
/* ### WELCOME BOX ### */
.welcomeBox{ padding-bottom:37px; width:658px; overflow:hidden;}
.welcomeBox h2{
padding:24px 0px 40px 30px;
font-family: “Myriad Pro”, Arial, Helvetica, sans-serif;
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;}

Feb 6, 2012 at 6:06 am

do it like this instead much better!

Mar 30, 2012 at 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!

Aniket - Freelance Web Designer
Feb 10, 2012 at 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.

Red Rays
Mar 1, 2012 at 12:58 pm

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

Mar 18, 2012 at 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

Mar 20, 2012 at 7:17 am


Mar 30, 2012 at 2:13 am

Location of Training

David Bachman
Apr 19, 2012 at 7:36 am

this is bad it dont woik

Apr 30, 2012 at 4:49 am

This does look like a great theme.

yemek tarifleri
May 2, 2012 at 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!

May 26, 2012 at 2:14 am

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

May 31, 2012 at 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

May 31, 2012 at 8:51 am

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

Jun 1, 2012 at 8:28 am

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

Jun 1, 2012 at 12:50 pm

How I can do it on white background?

Jun 1, 2013 at 9:40 am

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

Dec 10, 2016 at 10:07 pm


Post Comment or Questions

Your email address will not be published. Required fields are marked *