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:

<!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>

Try using this CSS3 Gradient Generator: colorzilla.com/gradient-editor — Lowkase
– Lowkase, Commented Aug 23, 2012 at 18:03

Undefined · Accepted Answer · 2012-08-23 18:17:00Z

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.

edited Aug 23, 2012 at 18:17

answered Aug 23, 2012 at 18:05

Undefined

11.4k5 gold badges40 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BuzzzHost.com · Accepted Answer · 2012-08-23 18:09:15Z

2

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

answered Aug 23, 2012 at 18:09

BuzzzHost.com

8210 bronze badges

Comments

Henrik Karlsson · Accepted Answer · 2012-08-23 18:08:48Z

1

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

answered Aug 23, 2012 at 18:08

Henrik Karlsson

5,7634 gold badges28 silver badges43 bronze badges

1 Comment

PJUK Over a year ago

+1 I usually generate my gradients but that would make the css so much nicer and a nice abstraction (I image it would be easier to add to this tool than go back over all gradients and regenerate for a any brand new browsers that appear) :)

Tom Naessens · Accepted Answer · 2012-08-23 18:03:45Z

0

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.

answered Aug 23, 2012 at 18:03

Tom Naessens

1,83722 silver badges38 bronze badges

Collectives™ on Stack Overflow

CSS3 Text Gradients not working?

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related