Web Designer Wall
CSS & HTML

CSS Gradient Text Effect

By Aigars Silkalns Updated 7 min read

CSS Gradient Text Effect

To make gradient text in CSS, give the element a background-image gradient, clip that background to the shape of the letters with background-clip: text, and make the text colour transparent so the gradient shows through. That is three declarations, no extra markup, no image files and no JavaScript, and the heading stays real, selectable, searchable text at any size.

It is a very different answer from the one this article gave in 2008, when the trick was an empty <span> inside the heading, absolutely positioned, with a 1px gradient PNG laid over the letters. That meant a PNG overlay on top of the text and a filter hack so the PNG would render in IE6. The overlay is gone now, and the CSS below replaces all of it.

Four headings on a dark background: a pink-to-violet-to-cyan horizontal gradient, a vertical lavender-to-violet gradient, a blue-to-purple animated gradient with a soft glow, and a striped red and yellow pattern fill
Four variations from the same technique: horizontal, vertical, animated and pattern fills.

The basic recipe

The markup is just a normal heading:

<h1 class="gradient-text">Gradient text in CSS</h1>

And the CSS:

.gradient-text {
  background-image: linear-gradient(90deg, #ff5f6d, #7c3aed 55%, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

The -webkit- line is there on purpose; the browser support section below explains why. Here is what each line does:

  1. background-image paints the gradient across the element’s box, as it would for any other element.
  2. background-clip: text (with its prefixed twin) trims the background so it only shows where the glyphs are.
  3. color: transparent removes the solid fill that would otherwise sit on top of the gradient. Per MDN, clipping to text has little or no visible effect if the text itself is opaque.

The overlay approach painted an image on top of the heading. This one does not: the gradient is the text fill, so it works on any background, in light mode, in dark mode, and over photos.

Browser support

background-clip is listed as Widely available (Baseline) on MDN, and linear-gradient() has been Baseline for years. The text value is the catch. According to MDN’s compatibility data, Chrome and Edge only supported it through -webkit-background-clip until version 120, and Safari until version 14; Firefox has supported the unprefixed form since 49. So Chromium before 120 understands -webkit-background-clip: text but ignores background-clip: text. Every snippet in this article therefore includes both lines, prefixed first. The cost is one extra line, and nobody on a slightly older browser gets a plain heading.

Always provide a fallback

If the clip is not supported, a transparent colour would leave an invisible heading. Wrap the effect in @supports so the fallback is a normal, readable colour:

.gradient-text {
  color: #7c3aed; /* readable fallback */
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gradient-text {
    background-image: linear-gradient(90deg, #ff5f6d, #7c3aed 55%, #06b6d4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

Test for both spellings, as above. If you test only the unprefixed background-clip: text, Chromium before version 120 fails the check and shows the plain fallback colour, even though it could have rendered the gradient.

Smoother colour with OKLCH interpolation

By default, gradients blend in sRGB, which tends to produce a muddy grey zone when you cross between very different hues. You can ask the browser to interpolate in a perceptual colour space instead, by adding in oklch (or in oklab) to the gradient:

.gradient-text {
  background-image: linear-gradient(90deg, #ff5f6d, #7c3aed 55%, #06b6d4);
  background-image: linear-gradient(90deg in oklch, #ff5f6d, #7c3aed 55%, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

The first declaration is the fallback. A browser that does not understand the in syntax drops the second line and keeps the first. With polar spaces such as OKLCH you can also choose how the hue travels with shorter hue or longer hue, which lets you route a gradient through the whole rainbow if you want it. Our cross-browser CSS gradient guide covers the gradient syntax itself in more depth.

Use custom properties for the palette

Keep the stops in custom properties, and one class can serve every heading on the site, in both colour schemes:

:root {
  --grad-a: #e11d48;
  --grad-b: #6d28d9;
  --grad-c: #0891b2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grad-a: #ff5f6d;
    --grad-b: #a78bfa;
    --grad-c: #22d3ee;
  }
}

.gradient-text {
  background-image: linear-gradient(90deg in oklch, var(--grad-a), var(--grad-b), var(--grad-c));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Dark mode usually needs lighter stops, so the contrast with the page stays comfortable. Check the darkest and lightest parts of the gradient against the background, not only the average.

Vertical, diagonal and pattern fills

Everything you can put in a background-image works as a text fill. A vertical gradient gives the old “glossy” look without a PNG:

.metal {
  background-image: linear-gradient(to bottom, #fff, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

The zebra pattern from the original article is now a repeating gradient, which stays sharp on high-density screens:

.stripes {
  background-image: repeating-linear-gradient(45deg, #ff5f6d 0 12px, #fbbf24 12px 24px);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Photos work too: set background-image: url(texture.jpg) with background-size: cover. Use a very heavy font weight so enough of the image shows through the letters.

Animate the gradient

Browsers cannot animate the angle of a gradient directly, because a custom property is just a string until it is registered. Register the angle with @property, and it becomes animatable. MDN lists @property as Baseline 2024, so it is available in current versions of all major browsers:

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 90deg;
}

.gradient-text.animated {
  background-image: linear-gradient(var(--angle, 90deg) in oklch, #ff5f6d, #7c3aed, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: spin-gradient 6s linear infinite;
}

@keyframes spin-gradient {
  to { --angle: 450deg; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text.animated {
    animation: none;
  }
}

The end value is the start plus one full turn (90deg + 360deg), so the loop is seamless. The reduced-motion block matters: continuous motion in a heading can be distracting or uncomfortable for some people, and users can ask their operating system to turn it off.

Note the var(--angle, 90deg). A var() with no fallback is the one place where a normal “earlier declaration wins” fallback does not work: if --angle is undefined, the declaration is invalid at computed-value time, the background-image becomes none, and the transparent text disappears. With the 90deg fallback, a browser without @property support (before Chrome 85, Firefox 128 and Safari 16.4 per MDN) shows the same static gradient as the basic recipe; it just does not move. Wrap the whole thing in the @supports block from earlier if you also need to cover browsers without text clipping.

For a ready-made collection of animated type, see the CSS animated text effects snippet, or the hero section with typewriter text if you want a gradient headline inside a full banner.

Add a glow or shadow the right way

text-shadow does not behave with transparent text. The shadow is painted for the glyph shapes and, because the glyphs are transparent, it is visible through them, where it mixes with the gradient. In the comparison below, the left heading uses a hard black text-shadow and most of the gradient is hidden; the right one uses filter: drop-shadow(), which shadows the final rendered shape.

Two gradient headings side by side on a dark background: the left with text-shadow, where a dark smear shows inside the letters, and the right with drop-shadow, where the letters stay clean and a soft violet glow surrounds them
Left: text-shadow bleeds through the transparent letters. Right: filter: drop-shadow() keeps them clean.
.gradient-text {
  filter: drop-shadow(0 4px 24px rgb(124 58 237 / 0.5));
}

Use filters sparingly on large areas of text, and do not combine them with an infinite animation on long paragraphs.

Accessibility checklist

  • Contrast. Every part of the gradient has to meet contrast requirements against the background behind it. Large headings need at least 3:1 under WCAG, body text 4.5:1. Check each stop, not just the middle.
  • Forced colours. In Windows High Contrast and other forced-colours modes (forced-colors: active), the browser overrides author colours and background images with system colours. I checked this with Chromium’s forced-colors emulation: the computed background-image became none and the text colour became the system text colour, so the heading rendered as plain, readable text. That is the behaviour you want, but it relies on the browser’s override. A short reset states the intent explicitly, so the heading is still guaranteed to use CanvasText if an engine or a future change treats the transparent colour differently. Verify it in the forced-colours emulation in DevTools: 
    @media (forced-colors: active) {
  .gradient-text {
    background: none;
    color: CanvasText;
  }
}
  • Reduced motion. Respect prefers-reduced-motion for any animation, as shown above.
  • Keep it for headings. Gradient fills suit short, large display text. Body copy, links and form labels are better in a single solid colour.
  • Use real text. Because the heading stays text, screen readers, search engines, translation and copy-and-paste all keep working, which was never guaranteed with image replacement.

Common problems and fixes

Problem Cause Fix
Heading is invisible Fallback missing, or no background-image applied Set a solid color first and apply the transparent colour inside @supports
No gradient, only solid colour The text colour is still opaque Use color: transparent on the same element
Gradient spans the whole line width, not the text Block element is as wide as its container Use width: fit-content or display: inline-block so the gradient fits the text
Uneven gradient on wrapped lines The gradient is one box stretched across all lines Balance the lines with text-wrap: balance, or shorten the heading
Shadow tints the text text-shadow shows through transparent glyphs Use filter: drop-shadow() (see the comparison above)

Pair it with good typography

Gradient fills look best on bold or variable fonts at large sizes, because thin strokes hide most of the colour. A weight of 700 to 900 and a fluid size such as clamp(2.2rem, 6vw, 4.5rem) are a good starting point. If you are choosing and loading the typeface itself, our @font-face design guide is the place to start. And if you want the same gradient treatment on controls, see CSS gradient buttons, plus the gradient contact form for a larger example.

Frequently asked questions

Does gradient text hurt SEO?

No. It is ordinary text in an ordinary heading, styled with CSS, so search engines read it like any other heading.

Can I use gradient text on links and buttons?

You can, but the hover and focus states need extra care, since changing the colour has no effect once it is transparent. Change the gradient or add an underline instead, and keep a visible :focus-visible outline.

Why not an SVG or an image?

Images do not scale with the font size, cannot be translated or selected, and need a separate file per heading. SVG text can do gradients as well, but CSS is simpler for page headings and fits naturally into your theme variables.

228 comments from the archive

  1. 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)

  2. 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!

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

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

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

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

  8. 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. :-)

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

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

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

    ignore my last comment.

    :D

  14. 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…

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

    maz!

  18. Great tip!!

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

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

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

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

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

  24. @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)

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

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

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

  30. Nice effect!

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

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

  32. 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.”

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

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

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

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

  39. 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!

  42. 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).

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

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

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

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

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

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

  49. 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!!!

  51. 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!

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

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

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

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

    thanks!

  58. 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).

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

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

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

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

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

  64. 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!!

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

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

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

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

  70. 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”.

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

  73. “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 ;)

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

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

  76. 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?

  77. @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!”

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

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

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

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

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

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

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

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

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

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

  93. css background examples , Properties , Attribute – – css-lessons.ucoz.com/background-css-examples.htm

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

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

  97. 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?

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

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

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

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

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

    Excellent!

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

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

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

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

  108. 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)

  110. Hi,

    Exaples don’t work for me! IE 6.0.2900

    Text is hidden by gradient

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

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

  116. 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…)

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

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

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

  121. 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??”

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

  123. 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!

  124. 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!

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

  128. 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!

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

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

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

  133. 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! :)

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

  136. 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. :-)

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

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

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

  141. 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;}

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

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

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

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

  147. 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…

  149. 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; }

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

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

  154. 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("");
    });
    // -->

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

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

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

  160. 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?

  161. buraya birseyler karalamak gerekiyor ama tam olarak ne yazacagimi bilmiyorum.

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

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

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

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

  170. 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
    ?

  171. 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!

  172. 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?

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

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

  176. 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?

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

  181. 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 ;)

  182. 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)

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

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

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

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

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

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

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

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

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

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

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

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

  200. “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.

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

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

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

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

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

  207. 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?

    1. Try putting quotation marks around the image source.
      url(‘css-gradient/images/gradient-white.png’)…….

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

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

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

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

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

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

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

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

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

  217. 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. :)

  219. 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;}

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

  222. 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!

  223. 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!

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

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

Comments are closed on this article.