Text Gradient

Nowadays you can see nice tricks like text gradient in many places... but? Have you ever wondered how they are made? Let me teach you today.

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

See here first we have given a gradient to the background of the text. Then we will make the text color TRANSPARENT so that it is not visible.
After that we will use the background-clip property to make the text so that the color of the background is changed to the color of the text.

If you want to know 4 more such tricks, click on the image below?