Pure CSS3 text color gradient - Is it possible?

Question

Is there a way to create a cross-browser, pure CSS3 text color gradient?

So, no png's. No 'webkit' only.

EDIT: To be more precise: It's CSS3 only, and it's for text, not box gradients.

EDIT: I found this solution, but it's only for webkit.

It's easy, you can refer to this article: webdesignerwall.com/tutorials/cross-browser-css-gradient — Jay
– Jay, Commented Jan 19, 2011 at 19:59
That's limited to box gradient only, I'm afraid. I'm looking for text gradient. — Kriem
– Kriem, Commented Jan 19, 2011 at 20:17
Here's an SVG example - it uses an image rather than an SVG gradient, but that should be easy to change. — robertc
– robertc, Commented Jan 24, 2011 at 19:49

Michael Mullany · Accepted Answer · 2011-12-19 20:43:45Z

13

There is no cross-browser way to do this outside webkit because only webkit currently has a background-clip: text, and this extension to background-clip is not on standards track (as far as I am aware). If you want to relax your CSS3 requirement, you can accomplish the same effect cross-browser with Canvas (or SVG), but then you're talking about HTML5-capable browsers only.

edited Dec 19, 2011 at 20:43

answered Jan 20, 2011 at 5:57

Michael Mullany

32.1k6 gold badges84 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gus T Butt · Accepted Answer · 2011-10-17 16:19:12Z

5

There is no "pure" CSS way at the moment, but there is a way using CSS and some duplication of content. See my server side css gradient text solution here, which doesn't require JavaScript or plain background. You can also do this client side using JavaScript, see what Dragonlabs has done here.

answered Oct 17, 2011 at 16:19

Gus T Butt

1972 silver badges5 bronze badges

3 Comments

Joseph Marikle Over a year ago

Very impressive and intuitive. Thanks for this option.

Joseph Marikle Over a year ago

Sorry fo the double comment, but I thought it might be useful to quick add my variation of your solution: jsfiddle.net/P8k58. I used a few tricks to get it to work correctly and for my purposes I used a text shadow to finish off the effect. For the purpose of just creating a shine, however, this could easily be done with CSS content only (IE 8+ at best).

Gus T Butt Over a year ago

@JosephMarikle Thanks. And I like your use of :before and :after .

enyo · Accepted Answer · 2012-02-28 16:58:07Z

0

As I've already pointed out as a comment in zzzzBov's response, there is a way to achieve a text gradient in CSS3 only.

If you take the PNG solution a bit further, you can do the same trick with css3 gradients.

Of course this does only work for text that is on a uniform background color.

answered Feb 28, 2012 at 16:58

enyo

16.9k10 gold badges63 silver badges77 bronze badges

Comments

sean2078 · Accepted Answer · 2016-05-20 00:57:39Z

0

Best solution at the moment is to use a solid color as non-webkit fallback and then use the following technique ( requires webkit ):

h1 {
  color: $333;
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1>Example</h1>

answered May 20, 2016 at 0:57

sean2078

5,5106 gold badges35 silver badges33 bronze badges

1 Comment

sean2078 Over a year ago

I already pointed out that it "requires webkit" .. Did you have a better solution? Works in FF, Chrome and Safari .. @user2602584 poor user

Collectives™ on Stack Overflow

Pure CSS3 text color gradient - Is it possible?

4 Answers 4

Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related