Pure CSS3 text color gradient - Is it possible?

colors css gradient
Kriem picture Kriem · Jan 19, 2011 · Viewed 50.2k times · Source

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.

Answer

Michael Mullany picture Michael Mullany · Jan 20, 2011

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.

Related questions

How to create a gradient with 3 colors in CSS without color escalation

In this example I have a gradient of 2 colors, alignd to right. background: linear-gradient(to right, #c4d7e6 50%, #66a5ad 50%, #66a5ad 50%); Is there any way I can have more than 2 colors? For example may I add red color …

Read More
Change color of PNG image via CSS?

Given a transparent PNG displaying a simple shape in white, is it possible to somehow change the color of this through CSS? Some kind of overlay or what not?

Read More
How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

Imagine a simple unsorted list with some <li> items. Now, I have defined the bullets to be square shaped via list-style:square; However, if I set the color of the <li> items with color: #F00; then …

Read More