How To Make A Rainbow Text Animation Using HTML and CSS?
Hello and welcome to the Codewithrandom blog. We’ll look at how to make a Rainbow Text Animation Using HTML and CSS. I hope you will enjoy our blog. We will teach you how to create rainbow text animation.
On Web pages, we frequently use various types of headings. In that heading, I want to use a variety of animations. This rainbow text effect will add a lot of interest to your plain text.
To make these animated rainbow text effects, I first created an HTML text. Then I used CSS to add colour here. A total of seven different colours have been used here.
| Code by | Arun |
| Project Download | Link Available Below |
| Language used | HTML and CSS |
| External link / Dependencies | No |
| Responsive | Yes |
Step1: Lets Start with adding some Basic HTML for Rainbow Text Animation
The HTML is hypertext markup language is the main structure of our webpage which will help us to display our content to the browser.
All the HTML document must start with <!doctypehtml> this helps the browser to understand the code written follows the lastest HTML format.
The HTML document itself begin With <html> and end with </html>.
The content that will be displayed in the brower comes under the body section <body></body>.Inside the body tag main content lies.
Now let’s take a look at our HTML code.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rainbow Text</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="rainbowText">Code With Random</div>
</body>
</html>
- We’ve included an external style link in our HTML’s header.
- We’ve added a div tag in the body of our HTML to contain our main text (“CodeWithRandom”). We will add the rainbow animation using CSS only in this text.
Now let’s take look at our output without styling.
ADVERTISEMENT
ADVERTISEMENT
So we have added the HTML tags and Their contents, Now it’s time to make it attractive by adding the CSS code.
ADVERTISEMENT
ADVERTISEMENT
Step2: CSS code for Star Rating
ADVERTISEMENT
Cascading Style Sheets is a style sheet language that is used to describe the presentation of a document written in a markup language like HTML or XML.
Now we will look at our CSS code.
body {
background-color: #333;
display: flex;
justify-content:center;
align-items: center;
height: 100vh;
}
.rainbowText {
font-family:arial black;
font-size:70px;
background-image:
linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: move 35s linear infinite;
}
@keyframes move {
to {
background-position: 4500vh;
}
}
@media screen and (max-width:900px){
.rainbowText{
font-size:2rem;
}
}
@media screen and (max-width:600px){
.rainbowText{
font-size:1rem;
}
}
Now that we’ve included our CSS code in our article, let’s go over it step by step.
100+ Front-end Projects for Web developers (Source Code)
Step1: First, we’ll add a black background to the body of our webpage. The display is set to “flex,” and the content is set to “centre.” The height is defined as 100 vh.
body {
background-color: #333;
display: flex;
justify-content:center;
align-items: center;
height: 100vh;
}
Step2: We will now add different colours to our text by using the “.rainbowText” class. The font family is “Arial,” and the font size is “70px.” Using the background-image property, we will now add a linear gradient with seven different colours to our text. We’ve also added a “move” animation with an infinite loop.
.rainbowText {
font-family:arial black;
font-size:70px;
background-image:
linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: move 35s linear infinite;
}Step3: We also added some keyframes to our animation so that we can see the gradual changes of different colours in our text, which will look like a rainbow.
@keyframes move {
to {
background-position: 4500vh;
}
}Step4: Now we’ll make our website more responsive. To add responsiveness, we used media query. We have defined two maximum screen widths (max-width: 900px): if the screen size of our window is equal to or less than the defined width, the font size of our text will change to 2 rem; another maximum screen width is defined at 600px; if the screen size of our window is less than the defined screen size, the font size of our text will change to 1.5 rem.
@media screen and (max-width:900px){
.rainbowText{
font-size:2rem;
}
}
@media screen and (max-width:600px){
.rainbowText{
font-size:1rem;
}
}
Now we have completed our css code and below👇here is the output after styling our webpage.
Output:
We’ve finished styling our website. Let’s take a look at our video preview now so we can fully grasp the concept of rainbow text animation.
We’ve finished our rainbow text animation project with HTML and CSS. This project was simple, but it taught you how to add different colours to text and how to add animation to text.
Video output:
Now We have Successfully created our Rainbow Text Animation Project. You can use this project for your personal webpage and We hope you understood the project , If you any doub’t feel free to comment!!
If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
Which code editor do you use for this Rainbow Text Animation coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this is a responsive project
Do you use any external links to create this project?
No!
What are the properties required for the rainbow text animation?
Some Important properties required for rainbow text animation are gradient colour property,animation,keyframes these are some main properties required for rainbow text animation
