CSS3 is it possible to add text-gradient yet?

问题

I am looking for adding gradient in text. Net tuts have a quick tips about that. But its only for webkit browsers. As this is quite old post i am checking if there is any cross browser solution for that (disregard ie).

I know how to use background gradient image

回答1:

The only way I know to get this working in Firefox is through SVG, which unfortunately is a bit clumsy. The good part is that is should work in Opera and IE9 too (untested). Will work in Firefox 3.6 if the doctype is declared as XHTML and served as XML (ugh).

<svg height="200" width="500">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1"/>
      <stop offset="100%" style="stop-color:rgb(60,60,60); stop-opacity:1"/>
    </linearGradient>
  </defs>
  <text x="0" y="150" font-family="Arial Black, Arial" font-size="55" fill="url(#gradient)" letter-spacing="-1" class="svg_text">
    NICE GRADIENT
  </text>
</svg>

Check it out on JSFiddle http://jsfiddle.net/sHaWW/

来源：https://stackoverflow.com/questions/6564490/css3-is-it-possible-to-add-text-gradient-yet