Teleport
Teleport

Reputation: 85

Is there a simple way to style text with gradients?

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

Answers (2)

Michael Mullany
Michael Mullany

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

meo
meo

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

Related Questions