css text gradient

Question

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.

Answer 1

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

p {
    background: linear-gradient(red, blue);
    -webkit-background-clip: text;
            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>

Answer 2

In 2021, we can do this cross-browser!

p {
    background-image: linear-gradient(red, blue);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

Some things to note:

• A lot of the old examples use -webkit-text-fill-color rather than color. The two are actually functionally identicial^[1] (and both support transparent!), -webkit-text-fill-color just takes precidence. The reason this was used in old examples was because it provided a graceful fallback for non-webkit browsers --- any non-webkit browser that ignored the gradient or clip instructions would also ignore the -webkit-text-fill-color instruction, meaning that you wouldn't be left with transparent text on unsupported browsers. I guess this is a problem with this cross browser implementation, in that that we can't do a fallback like this, but it'll really only be a problem for really old browsers like IE11.
• background-clip is now standards tracked and implemented in other browsers (e.g. Firefox), but strangely the Chrome folks have chosen to keep the text clip option only available on their own vendor prefixed version, which is why we still need both^[2].

I have tested this, and it does work in Chrome 95 & Firefox 91.

Answer 3

Here's a simple solution with basic CSS. You can add an overlay div with linear-gradient from white to transparent. This div will take the full width and height of the desired text.

Example:

<style>
   .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(white, transparent);
   }
</style>

<div style="position: relative;">
   <p>
      Some text<br>
      Some text<br>
      Some text<br>
      Some text<br>
   </p>
   <div class="overlay"></div>
</div>

Answer 4

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>

Answer 5

This do

 .p {
      background: linear-gradient(to right, #911a80, #d42b45);
      background-clip: text;
      color: transparent;
    }

Answer 6

The easiest way for cross-browser text gradients is to use an image.

http://webdesignerwall.com/tutorials/css-gradient-text-effect