Reputation: 85
it is possible to style a background with gradients like:
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
Is there a way to style text with gradients?I've been looking for sth like:
color-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
but wasn't able to find anything simple.
Thanks for your help.
Upvotes: 1
Views: 110
Reputation: 31705
It IS possible. You just have to combine a background-image with a background-clip: text: See this most excellent example here.
background: url(/bgclip/img/paint.png) repeat, white;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
Upvotes: 1
Reputation: 31249
its not possible with pure CSS unless you use a image to cover the font: http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/ You could use the same technique but use a color to transparent gradient in the overlay element.
here is an example with pure CSS and an additional element: http://jsfiddle.net/Lub7z/
Upvotes: 0