How do I use a gradient as a font color in CSS?

Question

How do I use a gradient as a font color in CSS, without using images? I want to support Firefox.

I have used this code but it\'s not supported in Firefox:

Answer 1

Firefox Support:
Unfortunately, only WebKit browsers implemented text-fill-color.
There is no workaround for Mozilla yet.

Awesome post to this by Lea Verou:
http://lea.verou.me/2012/05/text-masking-the-standards-way/

Demo for WebKit:
http://jsfiddle.net/ondrek/trr67/

Code of HTML and CSS:

<h1>hello</h1>

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

How to generate own gradient:
You can also generate own gradient at
http://www.colorzilla.com/gradient-editor/

Duplicate to a question on:
CSS3 Gradient not working in Firefox

Answer 2

you can use multiple spans that are positioned on top of each other and assign a different height and color to each of them. Its really ugly coding wise, but it works. http://jsfiddle.net/7yBNv/

Text selection is behaving a bit funky, but not too bad. And copying copies several entries (depending on which layer is selected) So I'd say you are better of solving this with svg's.

(I got the answer from here ,check there for more details: http://www.bagnall.co.uk/gradient_text.asp)

html:

<h1 class="Gradient">Sample Gradient Text (h1)
   <span class="G1" aria-hidden="true">Sample Gradient Text (h1)</span>
   <span class="G2" aria-hidden="true">Sample Gradient Text (h1)</span>
   <span class="G3" aria-hidden="true">Sample Gradient Text (h1)</span>
   <span class="G4" aria-hidden="true">Sample Gradient Text (h1)</span>
   <span class="G5" aria-hidden="true">Sample Gradient Text (h1)</span>
</h1>

css:

.Gradient{
    position: relative;
    overflow: hidden;
    height: 28px;
}
.Gradient,
.Gradient .G1,
.Gradient .G2,
.Gradient .G3,
.Gradient .G4,
.Gradient .G5{
    height: 28px;
    position: absolute;
    margin: 0;
    top: 0px;
    left: 0px;
    color: #4a778b;
    font-family: century gothic,helvetica,arial;
    font-size: 23px;
    font-weight: normal;
    overflow: hidden;
}
.Gradient{
    position: relative;
}
.Gradient .G5{
    height: 10px;
    color: #81a4b4;
    z-index: 6;
}
.Gradient .G4{
    height: 13px;
    color: #789eae;
    z-index: 5;
}
.Gradient .G3{
    height: 16px;
    color: #6f96a6;
    z-index: 4;
}
.Gradient .G2{
    height: 19px;
    color: #618a9c;
    z-index: 3;
}
.Gradient .G1{
    height: 22px;
    color: #547f92;
    z-index: 2;
}

Answer 3

.text1
 {
  font-size: 40px;
  background: -webkit-linear-gradient(#0F3, #F00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
background: -moz-linear-gradient(#0F3, #F00);
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
 }

you have to specify vendor prefix for firefox

Answer 4

You can use this generator textgradient.com to do CSS gradient texts.