Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css text gradient

Tags:

css

gradient

I've had alittle look around and can't find anything about this.

If i have a paragraph of text, is there a way, maybe with CSS3 to gradually change the colour of the text as it goes down to the page? instead of the way that gradient does it, because that only does it on the word not the whole paragraph of text.

So i want some text to start off white and then fade into black as it gets to the end of the paragraph.

I'm really not sure it can be done... Maybe there is a java script that can do it.

Thanks.

like image 885
ragebunny Avatar asked Dec 05 '11 11:12

ragebunny


1 Answers

You can do it using CSS but it will only work in webkit browsers (Chrome and Safari):

p {
    background: -webkit-linear-gradient(red, blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
like image 141
joshnh Avatar answered Oct 06 '22 03:10

joshnh