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.
You can do it using CSS but it will only work in webkit browsers (Chrome and Safari): http://jsfiddle.net/joshnh/DphXz/
I was able to do something similar in pure css, however, it does not work in IE, since it does not support mix-blend-mode css property: http://caniuse.com/#feat=css-mixblendmode
The code snippet is below. Hope it helps someone.
<html>
<head>
<style>
.gradient {
position: relative;
content: '';
display: block;
width: 260px;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(140,198,63,1)), color-stop(100%, rgba(30,71,146,1)));
background: -webkit-linear-gradient(left, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
background: -moz-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
background: -ms-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
background: -o-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
background: linear-gradient(to right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
}
.gradient p {
color: #000;
background: #fff;
mix-blend-mode: lighten;
}
</style>
</head>
<body>
<div class="gradient">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</body>
</html>
The easiest way for cross-browser text gradients is to use an image.
http://webdesignerwall.com/tutorials/css-gradient-text-effect
来源：https://stackoverflow.com/questions/8384751/css-text-gradient