I want to make my font have a vertical color gradient without using Javascript, such as this one.

Text to be applied:

<p>
  aaaaaaaaaaaaaaaa<br>
  bbbbbbbbbbbbbbbb<br>
  cccccccccccccccc<br>
</p>

After some research, I have:

[data-component="text-box"] p {
    font-size:20px;
    font-weight:700;
    background-image:-webkit-linear-gradient(bottom,#9E9F9E,#ffffff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

However, as I applied the style on <p>, the color gradient effect is applied on the whole paragraph, instead of single characters/lines. (screenshot)

Is there any way to make it apply on single characters/lines, for each of them to have vertical color-gradient? (example)

Edit: Applying on either single character or single line will be fine, since I want vertical gradient. Vertical gradient for chars/lines are the same.

CodePudding user response：

Here is the solution of the effect you want:

HTML

<p class="text-gradient">
TaihouKai
</p>

CSS

.text-gradient {
    font-size: 20px;
    font-weight: 700;
    background-image: linear-gradient(to bottom, #9E9F9E, #ffffff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

Explanation of background-clip CSS property (from MDN):

The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.

This property allows the background gradient, image or colour to be "cast" onto the characters themselves.

JS Fiddle Demo

UPDATE If you want to deal with multiple lines which are separated with line break <br />, you can use JavaScript to achieve:

revised JSFiddle demo

CodePudding user response：

The most important part of your CSS gradient text is the actual CSS itself. Check out the basic form of the CSS.

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

You can pick any html DOM element and use color gradient font.