CODEWITHSUNDEEP
colorscssgradient
Kriem
Kriem

Reputation: 8705

Pure CSS3 text color gradient - Is it possible?

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.

Upvotes: 27

Views: 50452

Answers (4)

sean2078
sean2078

Reputation: 5460

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>

Upvotes: 0

enyo
enyo

Reputation: 16726

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.

Upvotes: 0

Michael Mullany
Michael Mullany

Reputation: 31808

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.

Upvotes: 13

Gus T Butt
Gus T Butt

Reputation: 197

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.

Upvotes: 5

Related Questions