Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pure CSS3 text color gradient - Is it possible?

Is there a way to create a cross-browser, pure CSS3 text color gradient?

So, no png's. No 'webkit' only.

EDIT: To be more precise: It's CSS3 only, and it's for text, not box gradients.

EDIT: I found this solution, but it's only for webkit.

like image 340
Kriem Avatar asked Jan 19 '11 19:01

Kriem


People also ask

How do you give a gradient a color in CSS?

The linear-gradient() function sets a linear gradient as the background image. To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

Can you do gradient in CSS?

CSS gradients let you display smooth transitions between two or more specified colors. CSS defines three types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center)


2 Answers

There is no cross-browser way to do this outside webkit because only webkit currently has a background-clip: text, and this extension to background-clip is not on standards track (as far as I am aware). If you want to relax your CSS3 requirement, you can accomplish the same effect cross-browser with Canvas (or SVG), but then you're talking about HTML5-capable browsers only.

like image 149
Michael Mullany Avatar answered Sep 18 '22 22:09

Michael Mullany


There is no "pure" CSS way at the moment, but there is a way using CSS and some duplication of content. See my server side css gradient text solution here, which doesn't require JavaScript or plain background. You can also do this client side using JavaScript, see what Dragonlabs has done here.

like image 34
Gus T Butt Avatar answered Sep 20 '22 22:09

Gus T Butt