BFE.devAI解答 - CSS 问题
18. color gradients on text

To add color gradients to text, we can use the background-clip and text-fill-color CSS properties. Here's the code to achieve the desired effect:

.gradient-text {
  font-size: 30px;
  font-weight: bold;
  background: linear-gradient(to right, red, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

This code applies a linear gradient background, from red to yellow, to the text. The background-clip property ensures that the background is only visible where the text is located. Finally, the text-fill-color property makes the text color transparent, allowing the background gradient to shine through.

Note that -webkit- prefix is added for browser compatibility.