How to implement the gradient text effect of CSS tips paragraph in each line

Today Xiao Codepen on the page to see a CSS write effect. Each line of text in a paragraph is a gradient effect. It's not strange to implement a gradient fill for single-line text or individual words, but for each line of a paragraph, you can achieve a text gradient fill effect. It would still make a lot of people curious. If you are a curious member, please read on to find out!

Target effect

The goal today is to achieve the following effect, or to understand the little tricks of this effect:

See the above effect, I think a lot of people will first think of is Background-clip:text, Color:transparent and linear-gradient to complete. So that's the truth?

How do I finish each line of text in a paragraph with a gradient effect

Understand the CSS of the students are clear, using:

Background-image:linear-gradient (To-right, Deeppink, dodgerblue);-webkit-background-clip:text;color:transparent;

You can easily achieve a gradient fill effect of the text. For example, the following:

To do a small experiment, if the text is not a word or a single line but the whole paragraph, the effect will be how?

The effect seems to be perfect too. If you change the gradient effect parameter, the gradient effect is a bevel:

Background-image:linear-gradient (135deg, Deeppink, DodgerBlue);

Look at the effect of both:

Look carefully, the two effects are still different. Let's take a look at the same size container (the P element in this example, whose size is 765px * 165px), and for two different gradients, first look at the fill effect for right:

Then look at the 135deg fill effect:

Here, you may know how the previous example is different? And what is the reason for that? What if we want the various gradients to have the same effect on each line of the paragraph? Before implementing this, let's summarize briefly:

In Linear-gradient, the resulting text fill will be consistent with either a single word, a single line of text, or multiple lines of text. However, for other gradient angle parameters, there will be a difference in the effect of each row in a multiline text fill.

Back to the chase? How do you implement multiple lines and have the same effect regardless of the fill angle? Implementing this effect has a key attribute: Box-decoration-break. To put it simply, the Box-decoration-break property has two attribute values: Slice and clone, which correspond to the following effects:

Used in a paragraph, the effect is as follows:

is not getting closer to our goal. So let's use this attribute Box-decoration-break:clone for our example:

Background-image:linear-gradient (135deg, Deeppink, dodgerblue); background-clip:text;-webkit-background-clip:text ; box-decoration-break:clone;-webkit-box-decoration-break:clone;color:transparent;

The effect is as follows:

Let's check to see if we have the desired effect:

Tip: Box-decoration-break is applied to inline elements and is matched with corresponding line-height, allowing a certain amount of spacing between rows and rows.

Looking back, let's see that using Box-decoration-break is the difference between an element in a row and a block element:

is not perfect. If you like to try it yourself.