CSS3 Text Gradients not working?

问题

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

My current code is:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Text Gradients</title>
    <style>
    /* The gradient class */
    .gradient {
        -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(233,233,206,1)));
    }
    </style>
</head>
<body>
     <!--The text with the gradient-->
     <h1 class="gradient"> Hello World </h1>
</body>
</html>

回答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;
}

回答2:

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.

回答3:

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)));
    }

回答4:

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.

来源：https://stackoverflow.com/questions/12097529/css3-text-gradients-not-working

标签

html

css

text

gradient