CSS3 Text Gradients not working?

Question

I am trying to apply pure CSS3 Gradients (no images, etc.) on some text but the text remains un-changed.

My current code is:

Answer 1

I was able to produce gradient text in Chrome using:

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

Answer 2

That will only work for webkit users. To support all browsers you'll need at least:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */ 

Change the color values to the values of your need.

Edit: As @Lokase said: you can also use the generator which he linked in his/her comment.

Answer 3

I would recommend this site, this will work for all modern browsers

background-image: linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%);
background-image: -o-linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%);
background-image: -moz-linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%);
background-image: -webkit-linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%);
background-image: -ms-linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.22, rgb(93,245,172)),
    color-stop(0.61, rgb(121,255,207)),
    color-stop(0.81, rgb(158,255,249))
);

Also try using css3pie, it allows you to add some code that makes it work in IE browsers.

Answer 4

I recommend you to use -prefix-free if you are using lots of CSS3. This allows you to skip all browser prefixes, and the library will add all necessary prefixes at run time.

Your style would look like this if you use it:

.gradient {
        mask-image: gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(233,233,206,1)));
    }