Indian Flag Using HTML and CSS Code | Indian Flag HTML CSS
Indian Flag HTML and CSS Code
To make the Indian flag in this article we will be using only HTML and CSS . For me personally and for our mighty nation of India, this is a highly fascinating subject.
As a result, we design the Indian flag on Independence Day so that people can learn to code in India and commemorate the holiday. As a result, we wrote the HTML code for this project first, and then we added CSS styling.
Code by | procoding13 |
Project Download | Link Available Below |
Language used | HTML and CSS |
External link / Dependencies | NO |
Responsive | YES |
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
So let’s start writing Html code with proud💪🇮🇳 .
Table of Contents

Do you want to learn HTML to React? 🔥
If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions
Get your eBook now! 👇
Html Code For Indian Flag
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Independence Day</title> <link rel="stylesheet" href="style.css"> </head> <body> <body> <div id="top"></div> <div id="middle"> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Ashoka_Chakra.svg/50px-Ashoka_Chakra.svg.png"> </div> <div id="bottom"></div> <div id="rod"></div> <div id="text">Independence Day</div> </body> </html>
So this is all html code for our indian flag code, we use only html code and you can see in our code we link css files also so when we write css code it’s easy to see a preview.
Flag Structure:
For creating html structure we use a simple html div tag and an image tag in the image we have our ashoka chakra🇮🇳 . And after the image tag, we have text independence day you can change text like any motivation line our proud line of india🇮🇳.
Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)
Indian Flag html output

So let’s write css code and style our flag 🇮🇳.
Css Code For Indian Flag
body { background: #111; position: relative; left: 45%; top: 15px; overflow: hidden; } #top { height: 50px; background: #ff9c51; box-shadow: 0 0 5px #ff9c51; -webkit-animation: top_anim 4.5s infinite; animation: top_anim 4.5s infinite; } @-webkit-keyframes top_anim { 0% {width: 0px;} 30%{width: 250px;} 70%{width: 250px;} 100%{width: 0px;} } @keyframes top_anim { 0% {width: 0px;} 30%{width: 250px;} 70%{width: 250px;} 100%{width: 0px;} } #middle { height: 50px; background: white; box-shadow: 0 0 5px white; -webkit-animation: middle_anim 4.5s infinite; animation: middle_anim 4.5s infinite; -webkit-animation-delay: .2s; animation-delay: .2s; } @-webkit-keyframes middle_anim { 0% {width: 0px;} 30%{width: 250px;} 70%{width: 250px;} 100%{width: 0px;} } @keyframes middle_anim { 0% {width: 0px;} 30%{width: 250px;} 70%{width: 250px;} 100%{width: 0px;} } #middle img { display: block; width: 50px; height: 50px; margin: auto; -webkit-animation: img_anim 4.5s infinite linear; -webkit-animation-delay: .2s; animation: img_anim 4.5s infinite; animation-delay: .2s; } @-webkit-keyframes img_anim { 0% {opacity: 0;} 30% {opacity: 0;-webkit-transform:rotate(0deg);transform:rotate(0deg);-ms-transform:rotate(0deg);} 38% {opacity: 1;} 62% {opacity: 1;} 70% {opacity: 0;-webkit-transform:rotate(360deg);transform:rotate(360deg);-ms-transform:rotate(360deg);} 100% {opacity: 0;} } @keyframes img_anim { 0% {opacity: 0;} 30% {opacity: 0;-webkit-transform:rotate(0deg);transform:rotate(0deg);-ms-transform:rotate(0deg);} 38% {opacity: 1;} 62% {opacity: 1;} 70% {opacity: 0;-webkit-transform:rotate(360deg);transform:rotate(360deg);-ms-transform:rotate(360deg);} 100% {opacity: 0;} } #bottom { height: 50px; background: #5aad5e; box-shadow: 0 0 5px #5aad5e; -webkit-animation: bottom_anim 4.5s infinite; animation: bottom_anim 4.5s infinite; -webkit-animation-delay: .4s; animation-delay: .4s; } @-webkit-keyframes bottom_anim { 0% {width: 0px;} 30%{width: 250px;} 70%{width: 250px;} 100%{width: 0px;} } @keyframes bottom_anim { 0% {width: 0px;} 30%{width: 250px;} 70%{width: 250px;} 100%{width: 0px;} } #rod { width: 10px; height: 450px; background: #874a21; position: relative; top: -152px; left: -7px; border-radius: 40%; } #text { font-size: 35px; color: white; line-height: 50px; text-align: center; border-top: 4px solid #FF8915; border-left: 4px solid white; border-right: 4px solid white; border-bottom: 4px solid #148809; border-radius: 4px; display: block; width: 250px; height: 100px; position: relative; left: -300px; top: -600px; -webkit-animation: text_anim 4.5s infinite; animation: text_anim 4.5s infinite; } @-webkit-keyframes text_anim { 0% {text-shadow: 0 0 20px #6da2ff;} 50% {text-shadow: none;} 100% {text-shadow: 0 0 20px #6da2ff;} } @keyframes text_anim { 0% {text-shadow: 0 0 20px #6da2ff;} 50% {text-shadow: none;} 100% {text-shadow: 0 0 20px #6da2ff;} }
Step1:We’ll first add some fundamental styling to our page’s body using the body tag selector. In order to hide the overflow content, we will use the overflow property to set the overflow as “hidden” and the background attribute to set the background as “black,” relative to the position.
body { background: #111; position: relative; left: 45%; top: 15px; overflow: hidden; }
Step2: Now using the id selector (#top) we will add a height of 50px to the top section of our flag. Then using the background property we will set the bakcground as “Orange” and using the animation property we will add an animation of increase width with the help of keyframes.
How To Create Movie App Using HTML & CSS
#top { height: 50px; background: #ff9c51; box-shadow: 0 0 5px #ff9c51; -webkit-animation: top_anim 4.5s infinite; animation: top_anim 4.5s infinite; } @-webkit-keyframes top_anim { 0% { width: 0px; } 30% { width: 250px; } 70% { width: 250px; } 100% { width: 0px; } } @keyframes top_anim { 0% { width: 0px; } 30% { width: 250px; } 70% { width: 250px; } 100% { width: 0px; } }
Step3: Now using the id selector (#middle) we will add styling to the middle section of our flag.we will add a height of 50px to the middle section of our flag. Then using the background property we will set the bakcground as “white” and using the animation property we will add an animation of increase width with the help of keyframes.
Memory Game Using HTML, CSS, & JavaScript (Source Code)
#middle { height: 50px; background: white; box-shadow: 0 0 5px white; -webkit-animation: middle_anim 4.5s infinite; animation: middle_anim 4.5s infinite; -webkit-animation-delay: .2s; animation-delay: .2s; } @-webkit-keyframes middle_anim { 0% { width: 0px; } 30% { width: 250px; } 70% { width: 250px; } 100% { width: 0px; } } @keyframes middle_anim { 0% { width: 0px; } 30% { width: 250px; } 70% { width: 250px; } 100% { width: 0px; } } #middle img { display: block; width: 50px; height: 50px; margin: auto; -webkit-animation: img_anim 4.5s infinite linear; -webkit-animation-delay: .2s; animation: img_anim 4.5s infinite; animation-delay: .2s; } @-webkit-keyframes img_anim { 0% { opacity: 0; } 30% { opacity: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); -ms-transform: rotate(0deg); } 38% { opacity: 1; } 62% { opacity: 1; } 70% { opacity: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); -ms-transform: rotate(360deg); } 100% { opacity: 0; } } @keyframes img_anim { 0% { opacity: 0; } 30% { opacity: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); -ms-transform: rotate(0deg); } 38% { opacity: 1; } 62% { opacity: 1; } 70% { opacity: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); -ms-transform: rotate(360deg); } 100% { opacity: 0; } }
Step4: Now we will add styling to the third section of our flag. Using the bottom id selector we will set the height as “50px” and using the background property we will set the background as “green”and using the animation property we will add animation to the bottom of the flag.
#bottom { height: 50px; background: #5aad5e; box-shadow: 0 0 5px #5aad5e; -webkit-animation: bottom_anim 4.5s infinite; animation: bottom_anim 4.5s infinite; -webkit-animation-delay: .4s; animation-delay: .4s; } @-webkit-keyframes bottom_anim { 0% { width: 0px; } 30% { width: 250px; } 70% { width: 250px; } 100% { width: 0px; } } @keyframes bottom_anim { 0% { width: 0px; } 30% { width: 250px; } 70% { width: 250px; } 100% { width: 0px; } } #rod { width: 10px; height: 450px; background: #874a21; position: relative; top: -152px; left: -7px; border-radius: 40%; } #text { font-size: 35px; color: white; line-height: 50px; text-align: center; border-top: 4px solid #FF8915; border-left: 4px solid white; border-right: 4px solid white; border-bottom: 4px solid #148809; border-radius: 4px; display: block; width: 250px; height: 100px; position: relative; left: -300px; top: -600px; -webkit-animation: text_anim 4.5s infinite; animation: text_anim 4.5s infinite; } @-webkit-keyframes text_anim { 0% { text-shadow: 0 0 20px #6da2ff; } 50% { text-shadow: none; } 100% { text-shadow: 0 0 20px #6da2ff; } } @keyframes text_anim { 0% { text-shadow: 0 0 20px #6da2ff; } 50% { text-shadow: none; } 100% { text-shadow: 0 0 20px #6da2ff; } }
Yes, this is a 100+ line code of css for our Indian flag 🇮🇳 code.
50+ HTML, CSS & JavaScript Projects With Source Code
ADVERTISEMENT
We complete our code. You can see the output screenshot and video preview of how awesome our Indian🇮🇳 flag is.
ADVERTISEMENT
Final Output Of Indian Flag Source Code Html And Css
ADVERTISEMENT
ADVERTISEMENT

You can see in the video, that the Indian flag with animation is made by pure Html css. In flag, Ashoka chakra rotates animation and text coming animation also.
ADVERTISEMENT
In css, we use a simple css selector to target our Html elements. We use Keyframe for animation, so our Ashoka chakra🇮🇳 rotates by animation. Then we simply styled our text and give an animation so it’s run every second.
Ecommerce Website Using Html Css And Javascript Source Code
That’s it for this project, hope you like our blog website and enjoy creating this Indian flag code using Html css.
If you need any more project-related frontend. Visit our homepage and you get 100+ projects💝.
if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉
Code By – procoding13
written by – Codewithrandom
Which code editor do you use for this Indian Flag coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this project is a responsive project.
Do you use any external links to create this project?
No!