Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Create the Indian Flag using HTML and CSS
To create the Indian flag using HTML and CSS, we will need to have good understanding of CSS. Indian flag have three colors: saffron, white and green and Ashoka Chakra at the middle.
In this article, we will be creating stepwise Indian flag. First making a pole then tricolor and then rotating Ashoka chakra all with the help of HTML and CSS only. Later we will be animating our flag with wave animation and flag movement.
Basic Structure
We will start by creating the basic HTML structure for our Indian flag
<!DOCTYPE html>
<html>
<head>
<title>Indian Flag using HTML and CSS</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.pole {
width: 10px;
height: 400px;
background-color: #8B4513;
margin-right: 5px;
}
.flag {
width: 300px;
height: 200px;
position: relative;
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div class="container">
<div class="pole"></div>
<div class="flag"></div>
</div>
</body>
</html>
A brown pole and a white flag placeholder appear side by side on the page.
Creating the Tricolor
Now we'll add the three horizontal bands using CSS linear gradient
<!DOCTYPE html>
<html>
<head>
<title>Indian Flag Tricolor</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.pole {
width: 10px;
height: 400px;
background-color: #8B4513;
margin-right: 5px;
}
.flag {
width: 300px;
height: 200px;
background: linear-gradient(
to bottom,
#FF9933 0%,
#FF9933 33.33%,
#FFFFFF 33.33%,
#FFFFFF 66.66%,
#138808 66.66%,
#138808 100%
);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div class="container">
<div class="pole"></div>
<div class="flag"></div>
</div>
</body>
</html>
A flag with three horizontal bands appears: saffron at the top, white in the middle, and green at the bottom, attached to a brown pole.
Adding the Ashoka Chakra
Next, we'll create the 24-spoke wheel (Ashoka Chakra) in the center of the white band
<!DOCTYPE html>
<html>
<head>
<title>Indian Flag with Chakra</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.pole {
width: 10px;
height: 400px;
background-color: #8B4513;
margin-right: 5px;
}
.flag {
width: 300px;
height: 200px;
background: linear-gradient(
to bottom,
#FF9933 0%,
#FF9933 33.33%,
#FFFFFF 33.33%,
#FFFFFF 66.66%,
#138808 66.66%,
#138808 100%
);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
.chakra {
width: 50px;
height: 50px;
border: 2px solid #000080;
border-radius: 50%;
position: relative;
animation: rotate 3s linear infinite;
}
.spoke {
position: absolute;
width: 1px;
height: 25px;
background-color: #000080;
top: 50%;
left: 50%;
transform-origin: bottom;
}
.spoke:nth-child(1) { transform: translate(-50%, -100%) rotate(0deg); }
.spoke:nth-child(2) { transform: translate(-50%, -100%) rotate(15deg); }
.spoke:nth-child(3) { transform: translate(-50%, -100%) rotate(30deg); }
.spoke:nth-child(4) { transform: translate(-50%, -100%) rotate(45deg); }
.spoke:nth-child(5) { transform: translate(-50%, -100%) rotate(60deg); }
.spoke:nth-child(6) { transform: translate(-50%, -100%) rotate(75deg); }
.spoke:nth-child(7) { transform: translate(-50%, -100%) rotate(90deg); }
.spoke:nth-child(8) { transform: translate(-50%, -100%) rotate(105deg); }
.spoke:nth-child(9) { transform: translate(-50%, -100%) rotate(120deg); }
.spoke:nth-child(10) { transform: translate(-50%, -100%) rotate(135deg); }
.spoke:nth-child(11) { transform: translate(-50%, -100%) rotate(150deg); }
.spoke:nth-child(12) { transform: translate(-50%, -100%) rotate(165deg); }
.spoke:nth-child(13) { transform: translate(-50%, -100%) rotate(180deg); }
.spoke:nth-child(14) { transform: translate(-50%, -100%) rotate(195deg); }
.spoke:nth-child(15) { transform: translate(-50%, -100%) rotate(210deg); }
.spoke:nth-child(16) { transform: translate(-50%, -100%) rotate(225deg); }
.spoke:nth-child(17) { transform: translate(-50%, -100%) rotate(240deg); }
.spoke:nth-child(18) { transform: translate(-50%, -100%) rotate(255deg); }
.spoke:nth-child(19) { transform: translate(-50%, -100%) rotate(270deg); }
.spoke:nth-child(20) { transform: translate(-50%, -100%) rotate(285deg); }
.spoke:nth-child(21) { transform: translate(-50%, -100%) rotate(300deg); }
.spoke:nth-child(22) { transform: translate(-50%, -100%) rotate(315deg); }
.spoke:nth-child(23) { transform: translate(-50%, -100%) rotate(330deg); }
.spoke:nth-child(24) { transform: translate(-50%, -100%) rotate(345deg); }
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<div class="pole"></div>
<div class="flag">
<div class="chakra">
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
<div class="spoke"></div>
</div>
</div>
</div>
</body>
</html>
A complete Indian flag appears with the tricolor bands and a rotating blue Ashoka Chakra with 24 spokes in the center of the white band.
Adding Flag Wave Animation
Finally, let's add a realistic waving effect to make the flag appear as if it's flowing in the wind
<!DOCTYPE html>
<html>
<head>
<title>Animated Indian Flag</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #87CEEB, #E0F6FF);
}
.pole {
width: 8px;
height: 400px;
background: linear-gradient(to bottom, #8B4513, #654321);
margin-right: 2px;
border-radius: 4px;
}
.flag {
width: 300px;
height: 200px;
background: linear-gradient(
to bottom,
#FF9933 0%,
#FF9933 33.33%,
#FFFFFF 33.33%,
#FFFFFF 66.66%,
#138808 66.66%,
#138808 100%
);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 2px 2px 15px rgba(0,0,0,0.3);
transform-origin: left center;
animation: wave 2s ease-in-out infinite;
position: relative;
overflow: hidden;
}
.flag::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.4),
transparent
);
animation: shine 3s ease-in-out infinite;
}
.chakra {
width: 50px;
height: 50px;
border: 2px solid #000080;
border-radius: 50%;
position: relative;
animation: rotate 4s linear infinite;
z-index: 2;
}
.spoke {
position: absolute;
width: 1px;
height: 25px;
background-color: #000080;
top: 50%;
left: 50%;
transform-origin: bottom;
}
.spoke:nth-child(1) { transform: translate(-50%, -100%) rotate(0deg); }
.spoke:nth-child(2) { transform: translate(-50%, -100%) rotate(15deg); }
.spoke:nth-child(3) { transform: translate(-50%, -100%) rotate(30deg); }
.spoke:nth-child(4) { transform: translate(-50%, -100%) rotate(45deg); }
.spoke:nth-child(5) { transform: translate(-50%, -100%) rotate(60deg); }
.spoke:nth-child(6) { transform: translate(-50%, -100%) rotate(75deg); }
.spoke:nth-child(7) { transform: translate(-50%, -100%) rotate(90deg); }
.spoke:nth-child(8) { transform: translate(-50%, -100%) rotate(105deg); }
.spoke:nth-child(9) { transform: translate(-50%, -100%) rotate(120deg); }
.spoke:nth-child(10) { transform: translate(-50%, -100%) rotate(135deg); }
.spoke:nth-child(11) { transform: translate(-50%, -100%) rotate(150deg); }
.spoke:nth-child(12) { transform: translate(-50%, -100%) rotate(165deg); }
.spoke:nth-child(13) { transform: translate(-50%, -100%) rotate(180deg); }
.spoke:nth-child(14) { transform: translate(-50%, -100%) rotate(195deg); }
.spoke:nth-child(15) { transform: translate(-50%, -100%) rotate(210deg); }
.spoke:nth-child(16) { transform: translate(-50%, -100%) rotate(225deg); }
.spoke:nth-child(17) { transform: translate(-50%, -100%) rotate(240deg); }
.spoke: 
Updated on: 2026-03-15T15:59:14+05:30
14K+ Views
Advertisements