AI solution for CSS coding question on BFE.dev
18. color gradients on text

To apply a color gradient on text, we can use the background-clip and text-fill-color properties along with a linear gradient. Here is the CSS code that will apply the desired color gradient on the text:

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

Explanation:

• background-image property sets a linear gradient that goes from red to yellow from the left to the right.
• -webkit-background-clip property is used to make the background image clip to the shape of the text.
• -webkit-text-fill-color property specifies the color that will be used to fill the text, which in this case is transparent so that the gradient behind it can shine through.

Note: The -webkit- prefix is used for browser compatibility, as this feature is not yet standardized by CSS.