css - Can I have a horizontal multiple colour gradient on text using CSS3 / HTML 5?

Question

I'm trying to replace a sIFR based flash effect currently used on a website with CSS 3 styling. I have the text gradient effect working well using CSS 3 but the original sIFR implementation had multiple colours rather than just a simple gradient of one colour to the next.

Can someone provide me an example of styling a text element such as an H2 using multiple colours along the horizontal axis?

Thanks, Brian.

Answer 1

As far as I know this is only possible in webkit

h1 {
  font-size: 72px;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.03, rgb(250,3,3)),
    color-stop(0.52, rgb(240,255,127)),
    color-stop(0.76, rgb(42,24,173)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

http://jsfiddle.net/gEGHq/1