CODEWITHSUNDEEP
htmlcsstextgradient
Downgoat
Downgoat

Reputation: 14361

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>

Upvotes: 0

Views: 3970

Answers (4)

Undefined
Undefined

Reputation: 11431

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.

Upvotes: 3

BuzzzHost.com
BuzzzHost.com

Reputation: 82

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

Upvotes: 2

Henrik Karlsson
Henrik Karlsson

Reputation: 5713

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

Upvotes: 1

Tom Naessens
Tom Naessens

Reputation: 1837

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.

Upvotes: 0

Related Questions