Create “Gradient Text” using CSS

To create gradient text using CSS, you can use the background-image property and the linear-gradient function to apply a gradient color to a text element. Here’s an example of how you could do this:

.gradient-text {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

Then, you can use the .gradient-text class on an element such as a div or h1 to apply the gradient text effect:

<h1 class="gradient-text">Hello World!</h1>

Note that the -webkit-background-clip and -webkit-text-fill-color properties are used to clip the background image to the text and make the text transparent, respectively. These properties are necessary for the gradient to appear as if it is applied directly to the text.

You can adjust the colors and direction of the gradient by modifying the linear-gradient function. For example, you can change to right to to left to make the gradient go from right to left, or you can add additional colors to create a multi-colored gradient.