CSS: Gradient text colour?

Question

I'm trying to get some text to have a gradient colour, but I haven't a clue how. I'm trying to get it like this:

Gradient image

The only thing I have tried is -webkit-mask, but I couldn't get that working how I wanted it to. The other thing would be -webkit-gradient in the color property - is that possible?

Cross browser compatibility is fairly important, but not the end of the world. I'd prefer the text to be a solid colour in IE than to convert the entire thing into an image (there is quite a bit of text like this, some of it dynamic).

Ryan McDonough · Accepted Answer · 2012-08-31 13:29:15Z

7

For webkit based browsers (Chrome & Safari) :

.text {
  font-size: 20px;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#111));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

For IE & others:

http://www.webdesignerwall.com/demo/css-gradient-text/

edited Aug 31, 2012 at 13:29

answered Aug 31, 2012 at 13:02

Ryan McDonough

10k3 gold badges60 silver badges81 bronze badges

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

3 Comments

callumacrae Over a year ago

Thanks. Do you know of a way to do it other browsers, too? I'd like it if it worked in WebKit and Firefox minimum (although IE would be extremely nice).

callumacrae Over a year ago

Thanks, marked as solution. I won't use the link, as I would prefer it to just display a little differently than take away the ability to select text (although I guess that I could have another layer of text over all that with opacity 0?)

Pavlo Over a year ago

Why not to use modern linear-gradient syntax: background-image:-webkit-linear-gradient(#fff, #111);?

Collectives™ on Stack Overflow

CSS: Gradient text colour?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related