Textverlauf

Heutzutage kann man an vielen Stellen nette Tricks wie Textverläufe sehen ... aber? Haben Sie sich jemals gefragt, wie sie hergestellt werden? Lass mich es dir heute beibringen.

.text-gradient {
  background: linear-gradient(-25deg, #5662f6 0%, #7fffd4 100%);
  color: transparent;
  background-clip: text;
}

Siehe hier: Zuerst haben wir dem Hintergrund des Textes einen Farbverlauf gegeben. Dann machen wir die Textfarbe TRANSPARENT, sodass sie nicht sichtbar ist.
Danach verwenden wir die Eigenschaft „background-clip“, um den Text so zu gestalten, dass die Farbe des Hintergrunds in die Farbe des Textes geändert wird.

Wenn Sie weitere 4 solcher Tricks kennenlernen möchten, klicken Sie auf das Bild unten?