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.

score 6 · Answer 1 · answered Apr 12 '11 at 12:05

6

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

answered Apr 12 '11 at 12:05

Blowsie

40,239
15
88
108

I try to inprove your code, my results : http://jsfiddle.net/DoubleYo/qGfzm/ And I have try with `-webkit-mask-image` but you can only change the opacity in the gradient. – Yoann Apr 12 '11 at 12:15
@DoubleYo: Thanks for taking the time, your demo looks good so far. Is this definitely only possible in webkit browsers? – Brian Scott Apr 12 '11 at 12:16
@DoubleYo your example doesnt look any different from mine to be honest, @Brian Scott Im 99% sure only webkit has a CSS only solution – Blowsie Apr 12 '11 at 13:06
1

I juste change the FROM and STOp color to fix at 0% and 100%. And I display the element `inline-block` to have the gradient at 100% be at the end of the text. – Yoann Apr 12 '11 at 13:39
nice changes, i was unaware of what they were doing – Blowsie Apr 12 '11 at 14:24
1

You can get the same effect in FF4 with SVG text – Michael Mullany Apr 12 '11 at 15:14
@Michael, does this still leave the original text available for SEO purposes? Also, if I implement the SVG text approach which browsers will this cover? – Brian Scott Apr 12 '11 at 15:24
Yes this leaves the text available for Google - Google properly parses SVG. This works in Chrome 10, FF4 and *should* work in IE9 since they have at least static SVG support - but I havent' tested it. It only works in Safari if you serve your page as an XHTML page - there's no inline SVG yet like the other browsers. – Michael Mullany Apr 13 '11 at 21:34
@Michael: if you put up some example svg code with gradient I will accept as the answer. Also, have you any idea how to incorporate foreigobject for backwards compatibilty with non svg browsers? – Brian Scott Apr 14 '11 at 06:45
@Brian for IE 7&8 - which are the browsers I think you should care about, you can implement text gradients using VML - there are some sample codes on the internets for that. I don't know how this will display on older browsers, so can't comment on fallbacks. – Michael Mullany Apr 14 '11 at 18:32
@Michael I am aware of SVG, the question clearly asks for a CSS solution. – Blowsie Apr 15 '11 at 07:42
@Blowsie - yes, the answer doesn't match the question any more. Brian should probably reword his question or accept yours – Michael Mullany Apr 15 '11 at 16:53

score 4 · Accepted Answer · answered Apr 14 '11 at 18:22

enter image description here

Here is sample SVG code - tested with FF4, Safari 5, and Chrome. Note that you have to serve this as an XHTML page for Safari to render it. This should also work with IE9 but I haven't tested it.

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1">

  <defs
     id="FooDefs">
    <linearGradient
       id="MyFirstGradient"
       x1="400"
       y1="350"
       x2="400"
       y2="420"
       gradientUnits="userSpaceOnUse">
      <stop
         id="stop1"
         style="stop-color:#1acf86;"
         offset="0" />
      <stop
         id="stop2"
         style="stop-color:#ff0051;"
         offset="0.25" />
      <stop
         id="stop3"
         style="stop-color:#1da1c9;"
         offset="0.625" />
      <stop
         id="stop4"
         style="stop-color:#e45f25;"
         offset="1" />
    </linearGradient>
  </defs>
    <text
         x="150"
         y="420"
         id="textBAR"
         style="font-size:72px;fill:url(#MyFirstGradient);">
BIG TEXT TEST
</text>
</svg>

@Blowsie: True, but the explanation / responses have expanded on from the original request once it was clarified that CSS 3 would not offer what was required. I have updated the original question to rectify this. — Brian Scott, Apr 15 '11 at 08:15

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

2 Answers2

Linked