Fullscreen Glowing Tricolor Om Symbol Animation in Pure HTML & CSS
In this step-by-step web design tutorial, learn how to create a breathtaking, responsive Fullscreen Glowing Om (ॐ) Symbol Animation using 100% Pure HTML5 and CSS3—completely without JavaScript or external libraries!
🌟 Key Code Features:
Tricolor Animated Gradient: Renders vibrant Saffron, White, and Green stripes through CSS linear gradients with flowing
@keyframesbackground shifts.Glowing Upper Bindu: Features a high-contrast saffron and white dot with multi-layered glowing
box-shadowanimations that pulse independently above the crescent.Fluid Responsive Scaling: Uses viewport-based typography (
min(70vh, 70vw)) so the Om symbol automatically fits smartphones, tablets, and large 4K monitors.Gentle Breathing Effect: Smooth scaling transforms create a relaxing, spiritual pulse animation on a dark background.
100% Offline & Pure CSS: Single-file codebase requiring no JavaScript, framework setup, or external dependencies.
This project is perfect for web design beginners and CSS enthusiasts looking to master CSS text gradients, custom background clipping, keyframe animations, and drop shadows!
Don't forget to Like, Share, and Subscribe to Computer Soft Skills for more creative coding tutorials!
<!-- WELCOME ALL OF YOU ON COMPUTER SOFT SKILLS YT CHANNEL ------>
<!-- Complete, single-file HTML & CSS code to display a fullscreen glowing ॐ (Om) symbol ------>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fullscreen Tricolor Om with Visible Bindu</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #0d1117;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
font-family: Georgia, 'Times New Roman', serif;
}
/* ======= FULLSCREEN OM CONTAINER ======= */
.om-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
position: relative;
}
/* ======= WRAPPER FOR OM & BINDU ======= */
.om-wrapper {
position: relative;
display: inline-block;
}
/* ======= TRICOLOR ANIMATED OM SYMBOL ======= */
.om-symbol {
font-size: min(70vh, 70vw);
font-weight: bold;
line-height: 1;
user-select: none;
display: block;
/* Indian Flag Tricolor Gradient (Saffron -> White -> Green) */
background: linear-gradient(
180deg,
#FF9933 0%,
#FF9933 35%,
#FFFFFF 45%,
#FFFFFF 55%,
#138808 65%,
#138808 100%
);
background-size: 100% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Glowing Drop Shadows */
filter: drop-shadow(0 0 25px rgba(255, 153, 51, 0.6))
drop-shadow(0 0 45px rgba(19, 136, 8, 0.5));
/* Smooth Pulse and Gradient Flow Animations */
animation:
gradientMove 4s ease-in-out infinite alternate,
pulseScale 3s ease-in-out infinite alternate;
}
/* ======= HIGHLY VISIBLE CLEAR UPPER BINDU ======= */
.upper-bindu {
position: absolute;
top: -2%; /* Placed clearly above the Om symbol */
right: 25%; /* Centered right above the top crescent curve */
width: min(7vh, 7vw);
height: min(7vh, 7vw);
background: #FF9933; /* Vibrant Saffron Core */
border: 3px solid #FFFFFF; /* High-contrast white ring */
border-radius: 50%;
z-index: 10;
/* Powerful Multi-layer Glow */
box-shadow:
0 0 15px #FF9933,
0 0 30px #FFD700,
0 0 50px #FFFFFF,
0 0 70px #FF9933;
animation: binduPulse 1.8s ease-in-out infinite alternate;
}
/* ======= GRADIENT ANIMATION ======= */
@keyframes gradientMove {
0% {
background-position: 0% 0%;
}
100% {
background-position: 0% 100%;
}
}
/* ======= GENTLE BREATHING/PULSE ANIMATION ======= */
@keyframes pulseScale {
0% {
transform: scale(0.96);
}
100% {
transform: scale(1.04);
}
}
/* ======= BINDU PULSE & GLOW ANIMATION ======= */
@keyframes binduPulse {
0% {
transform: scale(0.9);
box-shadow:
0 0 10px #FF9933,
0 0 20px #FFD700,
0 0 35px #FFFFFF;
}
100% {
transform: scale(1.25);
box-shadow:
0 0 25px #FF9933,
0 0 45px #FFD700,
0 0 70px #FFFFFF,
0 0 90px #FF9933;
}
}
</style>
</head>
<body>
<div class="om-container">
<div class="om-wrapper">
<!-- Clear, High-Contrast Upper Bindu -->
<div class="upper-bindu"></div>
<!-- Om Symbol -->
<div class="om-symbol">ॐ</div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment