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.
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.
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?
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.
Davey
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
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!
Felix
Wow nice trick. Thanks a lot for pointing this.
Will surely use it on my next project (if you don’t mind).
mee
I never thought of this, cool trick. ThanX
Stefan
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
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.
Tobi
Cool Trick. Thanks! You have small typo within your text: You wrote:
position: relateiveinstead of:position: relative.Ivan
Genius mate, one of those “Why have I not thought of that” moments.
Renato
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?
Shabith
Thanks nick! great post!
OkkE
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. :-)
divya
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.
divya
yikes, I forgot to put the HTML tags in my comment in
. Sorry!Ritchie
wow. nice one.
Andy
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.
Andy
oops im a dim wit.. i glossed over the ‘lt’ in the conditional statement. doh!
ignore my last comment.
:D
kevinn
It’s too bad, it doesn’t look too well w/o font smoothing.
Siegfried
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…
Bram
now this is surely something very very handy!
Aaron
This is the most smashing trick I’ve come across ever! Thanks a lot for sharing,
Tate
Hah, very clever! I would never have thought of this.
Mauro Mazzei
Great article, this is the first post i’ve read here!
i think that i like your works :)
maz!
David
oh, nice idea! look really fine. i’ll test it later!
Christina
Great tip!!
Only thing is that you’ve spelt ‘relative’ wrong under the CSS heading for the h1 {position:relative;}
Christina
I think you’ve fixed it already!!
Gilbitron
Great tip. Will definetly use this. Thanks again.
cKey
great =)
i love your blog….keep it up!!!
kerberoS
So cool :)
giackop
Great!! Thanks!! I posted an article about that on my site.. Thanks again!!
alvarocker
Thanks dude!
joel
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
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
I guess you need to prevent the text from wrapping? ‘white-space:nowrap’ is the key.
shortshire
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.
Felipe
@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
awesome! very cool effects. can’t really believe that’s all css… great
giulia
sooo cool! congrats!
very clever trick, thanks!
Sam Rayner
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:
http://samrayner.com/archives/span_free_gradient_text_effect/
Obviously, IE support is more important on some sites than others but it’s nice to have the option there.
photoshop cs3 tutorials
realy good article!!
will apply it soon.. ;) thanks..!
Mohammed
fantastic! thank u
kevadamson
Clever. I’ll definitely bear this in mind should an appropriate project arise. Keep thinking outside the box! (”,)
John Lascurettes
Slick and simple. My favorite kind of tip.
Jen Germann
What a great tip!!! Nice creative thinking. Thanks much!
~ jen
Race
thats awesome, youre are “The” best designer!!!!!!
Richard Davies
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
kick ass my friend, kick ass
Looks real simple to boot!
I will be integrating that into a project next week
Hannah
Nice trick!
Murat Ayfer
that’s a brilliant idea. such a small touch, but makes a huge difference.
thanks
David
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
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
This is fantastic! I can’t wait to find an excuse to use this, thanks a bunch.
Stephen Wilson
Wow, this is such a great tip/trick. Wish I thought of it!
Min Thu
This is really a tricky technique. How could you find that out?
dee
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
That’s really great. I might use it. :) thanks.
Carly
Fantastic, the dark background sample looks the best. Very handy trick, may use this in the future!
Ralph
Respect to your great work and i will use perhaps :)
Ralph
ozrabal
Pure Web 2.0 heading technique ;) thx
Panagiotis Karageorgakis
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.
nanih
so easy, so great!
Soh
Great Tutorial!
Cacao
Thanks lots, this is sooo useful!
Sara
Neat trick! And this idea opens up sooo many more opportunities!
allysource.com
you always have the best tips
thank keep it coming
Anthony
Thanks!! I have been trying to do something like this for a long time. I never thought about using a png. :) thanks!!
Evan
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!
Javan
This is ridiculously simple and clever.
alex
dammit, why didn’t i think of this as a solution? Nice job!
jackzheng
googld work!
Ozh
Makes text mostly impossible to select/highlight. Don’t like it at all.
Segarceanu Razvan
Very useful and innovative!
Thank, I will use it :)
Ganesh Iyer
Quite neat
Erik Gyepes
Wow, this is really great and easy trick, thanks! :)
Paolo Bonzini
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
The young guys I work with at G3 Creative design in Scotland told me about this superb website – fab web tips.
Hakan
Thanks
Adam
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.
sesebian
Thanks
PENIX
Don’t know if I’ll ever use it, but it’s a nice trick none the less.
Ramon Bispo
Guys… This is really beautiful.
Thanks a lot!
RamonPage.
Matthew Hunt
hmm… I wonder if this works with swfir http://www.mikeindustries.com/blog/archive/2007/02/introducing-swfir
we will have to see
aliotsy
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.
Maya
great idea!
i’m wondering whether just giving the h1 itself your background image will suffice?
David
Great CSS work.
Thanks for posting.
Daniela
Great idea! Thanks for sharing! I’ll try it out soon.
Inspiration Up
Nice post. I would surely use it soon..Thanks for sharing!
Pavel
Wow! Cool tricks! То be translated into russian…
Thanks!
Game
Thanks for a great idea! I’ll try it
Madjib2001
Very useful, thanks
oggin
Thanks for sharing, cool post
Devin
I also came out with a cool solution to html text effects that is also SEO friendly.
http://tutorialdog.com/create-seo-friendly-text-images-headers/
Paolo
very beautiful.
Thanks! i’ll use surely this in my site!
Hawckins
Very Cool and innovative idea i also going to follow this. This reduces the image loading problem in the web sites
Loughlin
Interesting idea. Haven’t seen something this innovative since FIR ages ago – you should ask ALA to post this for some more community dissection ;)
imaginepaolo
Thanks! i’ll use surely this in my site! Please help Campania…
Daniel Baroody
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
Wonderful effect!
I’ll defentiely put this on good use. Thanks for sharing :)
gabriel
thanks,
very nice
Me
Looks like the same tutorial as A List Apart.
Afsin
Absolutely wonderful, thnx
Darren Northcott
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
Hi!
Interesting idea.
For some friends, I’ve recycled your code for use it with the IEPNGFix and I’ve writted this tutorial:
http://webstandards.dimix.it/2008/01/22/testi-con-gradienti-in-css/
I hope that this post is of interest to you and to others.
Thanks for your posts!
Kela
Great technique! But.. when I copied the sample address to IE.. it wasn’t displaying anything..
june
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.
Char
this is really good. i didn’t think it was that easy…
and man, i hate IE >.<;;;
Vagelis
Awesome tip ! Thnk you very much (again)
Hatkirby
Wow, another great tutorial! Keep up the great work!
Sarbjit Singh Grewal
wow, this is very smart trick.
Xavier Pimienta
I read your posts a time ago and I found it amazing! This post is very, very useful!
Thanks for your valuable information!
Regards,
Xavier
Amos
Thanks for the tutorial!
Keep up the good work!
bob
Your site F’ing rocks! Thanks for all the great tutorials.
Mac
This site is the shiznit!!!!!
AMHP
Does anyone see any reason why this wouldn’t work or would cause problems in html email?
thanks!
Vinifera7
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
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
CSS Globe has a similar article: http://www.cssglobe.com/post/1227/css-text-gradient
Boris
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
Wow that is cool. Will use it right away. Saving it to my delicious right now!
Damjan Mozetic
Beautiful site, with beautiful content. I liked this article a lot.
marianne mcdougall
The design guru says – this is a well crafted and well put together website
with some really fine tutorials.
Rectifier
This rocks thanks!
schnuck
new? inventive? tutorial? or simply stolen?
http://www.khmerang.com/index.php?p=95
Erik Curtis
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
Thank you so much for this. I love it and am going to try it out now.
jive
Brilliant idea.
coroijo
why bother people? more knowledge source for everyone.. that’s what sharing means for..
David Jacques-Louis
Fantastic
Sam Hardacre
Great idea : )
bbx
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) : http://bbxdesign.com/
John
Awesome effect! Will try out.
Thanks for sharing.
Best wishes,
Jonny
mukesh marwah
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
regards
mukesh marwah
Olenka
So clear! nice! thank u!
Marc Fowler
window.addEvent(‘domready’, function() {
var span = new Element(‘span’);
$$(‘h1’).each(function(el) {
span.clone().injectTop(el);
});
});
That’s one way of doing it for Mootools 1.1 as well, if anyone’s interested. Nice trick!!
d4ve
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.
Ali SEVİMLİ
Great..
cipher
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.
Regards,
cipher
DarkWolf
Nice! I love the effect!
I think that I will try it.
Thanks! :)
Francisco (Houston Wedding DJ) Perez
I love this one, I will use it for sure on my new website http://www.houstonpartybooths.com 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
Jesse
Or you could be the text on top, that way the text can still be selected like usual
Francisco (Houston Wedding DJ) Perez
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.
http://www.houstonpartybooths.com Just the Header is changed.
Thanks
Zhao Weijian
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
Very nice tutorial
Should be helpful
Dragolux
Wow, sweet tutorial! I LOVE CSS!!
datenkind
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
Bonjour,
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
Very very useful, thanks a lot. I will use it at my web project
Photoshop Free Tutorials
Very useful trick, thanks for the info :)
Vandel
ouuughh…that’s so cool css. can work on Mozilla FireFox?
Chicagolady
You are awesome!
Shefi
“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 ;)
Henrik
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
Super-Creative CSS-Trick.
I love it.
Ron S
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.
bdiddymc
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
@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!”
harmu
nice, the ipod example was a good one, kinda mixes with the theme pretty nicely!
Calvin Tennant
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 figmentmedia.ca.
Christian
wow – brilliant!
Blue Buffalo
Very cool CSS trick! Thanks for sharing.
Quanlm
Great! Thanks you so much
web design
web 2.0 tutorial. very respectfull :)
Nano
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.
Nano
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.
Wayne
Brilliant stuff! Thanks!
Cary
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.
Games
Thank you so much. I will use these wonderfuls in my site. But only one of them ‘It works IE6 too’ works in IE5.
Ravish
can some one give the example / demo of the 8bit.. png image..
Thiago Elias
Parabens!!!.
Brilhante esse tutorial..
Thiago Elias.
BRAZIL.
Web 2.0 Designs
Cool Articles!
Light gradient, large text, bright colors. It’s all about Web 2.0 trend.
Jordy Wouters
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
OnlyYoursPiyu
Excellent as usual…. :)
barry
The best ideas are the simplest.
Very cool indeed.
Hanush
A collection of cool copy and paste Text Gradients Effects. Create with you own text.
http://designz-web.blogspot.com/2008/06/css-gradient-text-effect.html
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.
Hanush
I did this to make your css more useful and comfortable for everyone to use. All credit to you.
http://designz-web.blogspot.com/2008/06/css-gradient-text-effect.html
Thanks
CSS 2.0 effects
I love this article, cool CSS effects for headings… :)
Giuseppe
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
Peter
Thank you for this one. Very neat trick, wonder what goes on behind the scenes.
pab
well done.
uk website designers
i love this, things are moving so fast these days, now i can make sites that use only css in the header.
Best Designs
It will help designers to create best designs for web 2.0 layouts.
Lee
I just love this theme is it available and is it 2.51 compatible??
SEO - Search Engine Optimization Philippines - Perth Australia
Thanks for a great post!
Ilias
Thanks , Nice tutorial
e devlet
css background examples , Properties , Attribute – – css-lessons.ucoz.com/background-css-examples.htm
John
this css doesnt work in IE / Netscape browsers
John
you forgot to mention the div on top of the text that sources the background image
Web 2.0 Expertise
Great Articles on site, it will help to create web 2.0 layouts.
örnekleri dersleri
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
Wonderful effect! I’ll defentiely put this on good use. Thanks for sharing
Web 2 Development
Awesome tricks on this site, this is also part of web 2, sharing your knowledge…:)
Affordable Web Design
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
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
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.
cantik
This is one of the best CSS tutorial I found.
Thanks….
Colin Miller - Freelance web designer
Wow! I like this a lot. I never realised you could do so much with a transparent .png – Worth exploring further! Excellent
Hunka
Excellent tutorial.
Web 2 Development
Great effect! This is common trend for web 2 sites….!
hossein
very vey very nice
you did it very well
i loved it
real estate postcards dude
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!!
thanks
People Search Dude
right on! nice one!
Business Oceans SEO Consulting
The best part about the CSS coding is the bandwidth savings.
Nice enhancement with just a little extra love added!
Excellent!
Stephanie
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.
Donna
you are so generous! thanks for sharing these great ideas along with all the details necessary to actually use them
best web design
Good effect…:)
Thanks for giving nice tips on all useful stuff.
Asep Sumardi
thanks man ! this very cool
Hanush
A collection of cool copy and paste Text Gradients Effects. Create with you own text.
http://designz-web.blogspot.com/2008/06/css-gradient-text-effect.html
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 - AttitudeWebsites.com
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
Great tips thank you very much for the information
reliable IT solution
Thanks for png fix for IE6 in last post, perfect solution for web designers.
hotq uehqm
hpafoy cqnxe aulem fnpz yzguwjbf fmhleixk hbruqxnmk
Sandeep
Great effective
Thanks a lot!
Sandeep
Begginer Web Designer.
Create Sean
Wow! this is a really great tutorial – will definitely be using this.
creativelotus
thanks.. i will be trying this out on my redesign.
CSS Model
Really like it. Very clearly explained. Thanks!
vikas
nice article
Shoes
Thank You! An excellent way to add graphical quality with minimal time overhead.
Alina
Thank you! :) I will try it!
marjurhy
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, marjurhy.wordpress.com–this is just new, very very new.
thanks a lot
Zeytin
Great effective.Thanks
Robin
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? (PageTalks.com)
Fahd Hamad
I really found the IE6 PNG hack very useful,
Thanks.
David Churchyard
Hi,
Exaples don’t work for me! IE 6.0.2900
Text is hidden by gradient
mario
Pierwszy koment
J
David that’s cuz you’re using a shit browser.
tjpeo odcwfalu
ubfprdcye csldbzmxu zwpcehi ntdy foimr lpwc fjzchxso
Sam Parkinson
Shoot that’s good CSS, selecting the text is a bit abnormal though.
Alanya
Another great post from this page, thank you!
Web Designer
This is an amazing trick! I would still rather create the image for compatibility, rather than fighting with different browsers
mert
thanks
fanta
that’s great trick, but how to do the same for navigation for example, with tags ?
fanta
tag didn’t show up, I meant with: li tag
Jesse Donat
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…)
yu
Thanks a lot
Very fun
Usman
Nice ver NICE
this should help me lot
Best Online Classifieds
Best lessons learned here. Thanks a million. We recommend this website to all.
GOOD JOB.
vipin vashisht the website designer
This the great trick to give the gradient color in text with css.
rakuten$amazon
Thanks!
This is an amazing trick!
Henry
Great post… excelent…!!!
http://www.crea-t.net
Carlos Hermoso
This is actually really useful. Thanks
estetik
tag didn’t show up, I meant with: li tags
Ariyo
Brilliant technique. I will use this in future projects for sure!
Thanks.
CraigCarson.co.uk
Yeah, this is a pretty cool wee effect. Its simple, it works and its another nice wee tool for the arsenal.
Car Wallpapers
Awesome, Thanks!
Danny
Looks great!
Thanks for sharing, love the demo page, gonna try the demo zip immediately.
sanat
thanks admin
Austin Web Design
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
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.
Dave
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?
Thanks!
Joshua
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!
BaltaDesign
Thank you for this one! Any variation with fonts/text is great
MegaFill
Thx! I know this hack, but i dont know about IE6 fix… thx!
synlag
Hey folks,
this is amazing!
Thx for this.
Check out worlds most innovative OpenSource Content Management System concrete5!
Cheers
العاب
thank you man it’s owseome
Douglas
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.
SB
Great tutorial, found it very usefull…
dani
hi
i think gradient is more effective in flash
estetik
great post. very useful information for me.
estetik
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?
Thanks!
rent a car
I’m looking at your page even in IE6 and the PNG is covering the words. Did I miss something?Thanks!
arac kiralama
this is amazing!
Thx for this.
Check out worlds most innovative OpenSource Content Management System concrete5!
Cheers …
oto kiralama
great post. very useful information for me.
Szymon
Wow, that’s so simple and nice! I can’t wait to use it on my blog.
web designer - dave calvert
pretty damn cool ………
theGweilo-com
Excellent! I like it
Silver Knight
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
thanks for this usefull information. have a good work.
sinema bursa
thanks you good article. nice sharing.
theme download
thanks for article.ı searching it.
seo
nice article.thanks.
estetik
Very informative page about CSS Gradient Text Effect. Tanks for sharing the info.
Türkmenler
very nice thank you
Mark Reilly
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:
http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
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.
布里斯班
Such a cool effect!
Thanks for sharing.
merdiven
thank you sharing
merdiven
thank you, very nice text efect
Hosting Companies Review
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! :)
tdz
It don’t work on IE6, why is it. HELP ME !!!!. I’m very like it
Nathan Nash
great! I’ve been looking for a way to implement something like this into my website. code > images.
Mike Schinkel
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. :-)
Jeff
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
thanks you
Simple Station Web Design
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
This is a great method thanks. I`ve always wanted to do something like this and its such as simple method!
C
Flash Buddy
So simply clever and cleverly simple. I’m a fan!
çorum
thanks.. nice script
Araba Resimleri
thanks.
flashfs
It’s hard to select text, but maybe a good trick if you just want some (real) text with a gradient
Nikhil Verma
Very good method to teach with examples and cool designs of web pages..
send me feedback.
henk
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;}
Edac2
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
My biggest concern with this approach is that the text is not selectable with the mouse.
Fred Campbell
Sweet. I’ve seen a few approaches to this problem, but this is by far neatest piece of code – thanks for sharing.
EBONIQUE
what if we r using corel paint shop x2
keaglez
This was a good one… :) Thanks… I love it, and your website sure is cool…
jack
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.
ais
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…
suraj
the only issue is the heading text is not selectable anymore…
Guy who tested
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; }
Jako
Haha. cool skill. I love it.
Allain Lalonde
That’s really smart. I’ll be using this idea soon.
Ujjwol
How do I use this in WordPress site ???
bagsin
exciting tips.
Abdullah
Very very inspiring css technique i m very inspired.. thnkx friends..
keep posting nice css techniques..
Ezuca
Wow! Very clever. Now I know why I’m seeing texts which have a gradient effect, I thought they were just pure image. Thanks
Ronny
Thanks for sharing, helped.
Might be interesting: http://chifont.justneat.com
Cyrus
Great , CSS Gradient Text Effect
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com
Michael
Great tutorial here is how the javascript should be written to avoid any compliance bugs.
<!--
$(document).ready(function(){
//prepend span tag to H1
$("h1").prepend("");
});
// -->
Gene
Your site flashes whenever I use the firefox 3.5.3 scrollbar. Quite annoying.
Gayomatic
It is so gay to use iPhone as a demo.
;-)
petre
Nice efects ;)
Dezzine
It doesn’t work in IE6 at all!!!
Mike
Really useful skill
Stephanie
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.
One_People
It doesn’t work in IE6 at all!!!
Debora
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
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
buraya birseyler karalamak gerekiyor ama tam olarak ne yazacagimi bilmiyorum.
zoeldt
sweet sweet ;-) thanks for sharing
sara
Very Nice article Keep going on
lilsizzo
xdas as
a
sdas
dsa
sa
dsa
d
sadas
dsa
asd
asda
vincentdresses
The designs showed here show what simple and tasteful design is all about. Another one to consider
aljuk
Stunningly simple. Thanks, I’ll be using this with the jQ prepend.
crowdsourcing website
interesting headings yet very simple codes… will be using them for sure.
psd xhtml
it is funny work for ie6, ie5 and ie5.5
Nissa Askew
Great tutorial. I will definitely be trying this out.
zabipapa
wow!!!
very cool :d
Trim Qemali
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
this is just awesome,and is really so simple.thnx a lot
santiago pilgerweg
cool Trick!
gonna use it soon … :-)
thanks for posting!
zeron
its nice!!!
Shubham
its awesome…I didn’t expected that it could be done with CSS.!
kython89
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.
gadarf
Muito bom, realmente deixa o site mais leve.
Thiago Holanda
Congratulations for this trick! It’s really cool and easy to use.
Artur
I have found this site recently and I am really surprised by the number of excellent lessons. thank.(clapping)
jamie
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
?
jamie
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
so simple !! thanks
Chad
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?
mauro
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
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
CSS can achieve the effect of flash is indeed a cool technology
Abdul Wakeel
I want to change the backgroudn color of this page
Any one can help me out
http://www.islamabadid.com/listen_to_fm_radios_islamabad/fm_100_islamabad/
anish
wow….really awesome…
this can also be used as a simple trick to make the text non-selectable.
Phil Doughty
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?
حسافه
Nice ..!!
thanks Man ..
^^
Progs4u
Thank you so much ..
You are very cool
TV apps
Thanks for a very useful tips!!
aiva
thanks for posting such an interesting study..
imran
This is very beautiful idea!!!!
Mo7mD.ZaYOnA
not work with me :(
Rusdimori
Woow.. You are cool…
..
Beautiful text.!
Thx for posting..
..
Dorian Muthig
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.
hamid
http://www.prizebondlucky.com see my site nd enjoy
denizli oto kiralama
good code thanks
Glow
wow, what’s a useful skill.
Thanks to share.
انفجن
fantastic tutorial i want permission from you to translate it and but it in my site and sure ill redirect it to the source
Shahaab
Brilliant tutorial. Thank You ! :)
Badrun Tralala
Very useful tutorial.. thanks…
hamid
see my webiste i hope u wil see nd enjoy
Manoj Rathore
This is very helpful and amazing
Brett Widmann
:D This is lovely! Thanks for the post.
sana 18f
hi,visit my site if u want my cell number thnx.
[email protected]
GKash
very cool – and very easy to follow- thanks!!
photoshop stuff
Great tutorial, makes very stylish headings! Thanks.
Jalak
Great posting, thanks.
hcg wholesale
Thanks for sharing this info!
Deepindera
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 ;)
C975A23
very nice trick! thanks for sharing!
Dushyant
excellent post. Thanks for this
hace
不错，非常好~~
Devall Krem
very cool – and very easy to follow- thanks!!
S Smith
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)
mikwillson
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
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
Today I have done a camera shootout with the white iPhone 4, the iPhone 3Gs and the iPhone 3G.
Uçak Bileti
css graidentler fark veriyor
Rick
lovely .. thanks for sharing..
Sachin
how can use it working properly for IE6 browser
Robert Steers
Excellent tutorial. These gradient effects are so useful!
Brandon Wright
I love this! Thanks :-)
Kenny Rogers Plastic Surgery
Wow great CSS effect. I will try on my site. You can check soon :)
Dayana
nice scripts,please share the new effects with html5
Exasperated
This isn’t a “pure CSS” solution. You can achieve this effect in modern browsers without the PNG overhead.
formula 21
Excellent tutorial. These gradient effects are so useful!
altın çilek
Thanks !!! Very usefull !!
altın çilek
nice scripts,please share the new effects with html5
hcg damla
lovely .. thanks for sharing..
hcg damla
This isn’t a “pure CSS” solution. You can achieve this effect in modern browsers without the PNG overhead
romadur
This isn’t a “pure CSS” solution. You can achieve this effect in modern browsers without the PNG overhead.
moliva
Wow great CSS effect. I will try on my site. You can check soon
sabina lamichhane
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
Thanks !!! Very usefull !!
SCC
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.
Donna
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
Katarina
that’s a nice effect. I’ll use it for my website.
Thank you very much for sharing!
çilek
Thanks !!! Very usefull !!
parsley
Wow great CSS effect. I will try on my site. You can check soon
panax
lovely .. thanks for sharing..
How To Put On A Condom | How To Get Taller
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
CSS trick you showed does work! Amazing!!
Mehboob Talukdar
It’s amazing .. thanks for sharing..
Desarrollo Web
cool, thanks for the demo.
dexx
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
Yuulélé
you cane use “h1:after” in place of “h1>span” (for semantic maniacs)
wow
crap, the text is not selectable anymore
what
“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
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.
Praveen
Cool! Thank you for the wonderful tutorial…:-)
Austin
Cool jqery effect .Loved it
小雷
谢谢分享
Max
Hi,
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.
designerashish
hmmmm….. good keep it up dear………
laser teeth whiten
Outstanding speech Thank you . brb
iTechWhiz- Technology News, Reviews, Articles, Tips and Tutorials
These are some wonderful CSS text animation tutorial and tips by you indeed.
John
This is decent but one large issue…the gradient is depicted by the background color of the h1 parent :(
Kory
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 http://kunitzshoes.ca/wordpress/
Thank you very much,
Kory
SEO
Information is helpful to learn a lot.
karthik
its very useful
طراحی وب سایت
its very useful
complex41
And then he handed you the thirty-five 45
Aysel
I wanna download photoshop but i don’t know how? Can some one send me it on skype “aysel_mega”
Adam
http://www.adobe.com/cfusion/tdrc/index.cfm?product=photoshop
L
HAHAHAHAAA!
game
Thx. The information is very interesting. Can be used practically.
Stéfan
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?
Diel
Try putting quotation marks around the image source.
url(‘css-gradient/images/gradient-white.png’)…….
Abdul Wahhab
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
Frank
Nice, but how do you make those images? I’ve been trying for an hour, with Photoshop.
xbox 360
so far so good
santrozen
awesome. easy to do
Cult
Elegante, bem bacana mesmo!
Mon Aquino
If you don’t have photoshop, try this to create the gradient. :)
http://pixlr.com/editor/
but i think its possible also to create this effect using the -moz-linear-gradient in css by using another .
eTube
Ha sido muy util.. Merzi.
Jordi.
mydexter
Ha sido muy util.. Merzi.
ชุดชั้นใน
Great information, it’s useful
parth
good job….very helpfulllll
696 Clothing
Very nice tutorial. I’ve been looking for this to make my post title blends with the template concept. Thanks alot.
Charis
Nice one … bookmark
Krishna Kumar
Amazing Trick…..
เครื่องจักรกลหนัก
Great information, it’s useful
televisionreview
Nice, but how do you make those images? I’ve been trying for an hour, with Photoshop. Thankyou for post
waef
awefawef
ccmag
Nice! Tutorial.. Thank a lot this tips helpful for me.
birdbird
Nice! Tutorial.. Thank
nmbb
hvbuiuho
Maryland SEO
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.
Bacha
this is realy nice one thanQ
markand
Nice tutorial thnx fr d help ;)
Thomas | Website Design Durban
Been searching high & low for a simple CSS tutorial like this. TX!
Small Dog Breeds
Thank for Tutoria, I’m studying CSS.
Freelance Artist
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
Thank for Tutoria, I’m studying CSS.
Best Television Price
Nice! Tutorial.. Thank
Best BlurayDiscPlayer Price
Awesome tutorial! I’m using the gradient effect on my H1 tag and it works like a charm. Thank you!
bogdan
The drawback is that you MUST use neutral backgrounds.
Which is quite a massive drawback
mian
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. :)
mian
mm…it doesn’t work if the h1 text has more than one row
Dhanesh T S
Awesome tricks….!!
spring valley vitamins
definitely, a BIG BIG deals.thx, for article
Jim
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;}
Dan
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-pure-css-text-gradients/
do it like this instead much better!
Andrew
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
Really Nice Tutorial.
Downloaded the attached zip file. Hope this is helpful in future for me. Already bookmarked this.
Thanks a lot.
Red Rays
Its a very nice place to capture and implementing jquery and CSS.
I have implemented this
Panagiotis
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
d
fgvvhn
ahmad
Location of Training
David Bachman
this is bad it dont woik
model
This does look like a great theme.
yemek tarifleri
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!
Elle
Elle , Directioner , Belieber , and I have more followers than friends
cyn
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
cyn
just found the solution :)
h1 {
margin: 0;
}
that will do it, thanks anyway!!
Dmitriy
330%/100%
that font-size/leading
but why set the value of 100%, if this value is default?
Dmitriy
How I can do it on white background?
http://it-spec.com.ua/kremen/error.png
DymoLabels
hi
i really like your collection
thanks for sharing your collection
keep it up
igxxx
good