How do you make text rainbow color in CSS?

How do you make text rainbow color in CSS?

To create rainbow text in CSS, you can use the linear-gradient function with different color stops. I'll explain how you can do this. Simply write a css code for convert text in rainbow color.

In the below code, linear-gradient function creates a gradient from left to right with the colors of the rainbow, and the -webkit-background-clip and -webkit-text-fill-color properties set the background to be the gradient and the text color to be transparent, so the gradient shows through the text.

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

You can apply the .rainbow-text class to any HTML element that contains text that you want to be in rainbow colors.

Write a css code for convert text in rainbow color.

Let me explain the code in more detail.

To create rainbow text, we are using a CSS gradient that goes from violet to indigo to blue to green to yellow to orange to red. We are using the linear-gradient function to create this gradient. The to right value specifies that the gradient should go from left to right.

Here is the gradient syntax used in the code:

background: linear-gradient(to right, 
  violet, indigo, blue, green, yellow, orange, red);

After the gradient is created, we need to apply it to the text. We can do this using the -webkit-background-clip property. This property specifies how the background should be clipped to the element, and we set it to text so that the gradient will only show through the text.

-webkit-background-clip: text;

Finally, we need to make the text color transparent so that the gradient shows through. We can do this using the -webkit-text-fill-color property, and setting it to transparent.

-webkit-text-fill-color: transparent;

By combining these three CSS properties, we can create rainbow text that will show the colors of the rainbow as the background of the text. You can apply this class to any HTML element that contains text that you want to be in rainbow colors.

Final code

Final code is.

<!DOCTYPE html>
<html>
<head>
<style>
.rainbow-text {
  background: linear-gradient(to right, 
    violet, indigo, blue, green, yellow, orange, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p class="rainbow-text">This is a paragraph. My First CSS Example</p>

</body>
</html>

Related posts

Write a comment