? Holi Festival Animation with Radha Krishna | Free Source Code

? Download a free Holi festival animation featuring Radha Krishna. Get fully responsive HTML, CSS, and JavaScript source code for your website. Perfect for Holi celebrations, greetings, and themed projects!

Wednesday, March 12, 2025
? Holi Festival Animation with Radha Krishna | Free Source Code

Holi Special Animated Background with Floating Hearts and Cloud Effect - Free Download ??

Introduction

Celebrate the festival of colors with this beautifully designed Holi Special Animated Background that features floating hearts and a gently moving cloud with "Happy Holi" text. This festive HTML, CSS, and JavaScript animation adds an elegant and joyful touch to any webpage, making it perfect for Holi-themed websites, greetings, event pages, and social media celebrations.

This code is available completely free of cost for personal and commercial use. Whether you are a developer looking to enhance your webpage or a festival enthusiast who wants to spread love and joy online, this animation is a perfect choice!

Key Features of This Holi Animation

✅ Floating Heart Animation – Beautiful red hearts appear randomly and float upwards, creating a dreamy and festive effect.
✅ Animated Cloud with “Happy Holi” Text – The cloud gently moves from side to side, adding a soft and cheerful touch to the design.
✅ Lightweight and Responsive – The animation works seamlessly on mobile and desktop devices without affecting performance.
✅ Pure HTML, CSS & JavaScript – No external libraries are required, making the code clean, fast, and easy to customize.
✅ SEO-Friendly and Optimized – The code is structured for better SEO, ensuring high visibility in search engines.
✅ Free for Personal & Commercial Use – Use this Holi animation freely on your website, blog, or greeting pages without any restrictions.

How It Works

This Holi Special Animation consists of three main components:

1️⃣ Floating Heart Animation:

  • Hearts are dynamically created using JavaScript.
  • They randomly appear at different positions on the screen.
  • Each heart moves from the bottom to the top while scaling and fading out.
  • Old hearts are automatically removed to optimize performance.

2️⃣ Cloud Animation with “Happy Holi” Text:

  • The cloud containing the Happy Holi message moves gently from left to right.
  • CSS animations create a floating effect that makes the design lively and engaging.

3️⃣ SEO Optimization & Performance:

  • The code is well-structured and lightweight, ensuring fast loading.
  • Mobile-friendly design ensures a smooth experience across all devices.
  • Proper use of meta tags, structured code, and animations improves search engine rankings.

How to Use This Code?

? Step 1: Copy the provided HTML, CSS, and JavaScript code.
? Step 2: Paste it into your HTML file.
? Step 3: Open the file in a browser to see the beautiful Holi animation in action!
? Step 4: Customize the text, colors, and animations as per your needs.

Why Use This Holi Animation?

? Perfect for Holi Festival Websites – Enhance your Holi-themed pages with eye-catching animations.
? Attractive Greetings & Banners – Create interactive Holi greetings for friends, family, and customers.
? Engaging UI/UX – The moving elements add a fun and celebratory vibe to your website.
? Fully Customizable – Modify the animation speed, heart colors, and text as per your preference.
? Fast and Smooth Performance – Uses only CSS and vanilla JavaScript, making it lightweight.


Final Thoughts

This Holi Special Animated Background is a fantastic way to bring festive joy to your website. With floating hearts and a moving cloud effect, this animation captures the essence of Holi and spreads happiness online.

? Copy it for free, customize it as per your needs, and celebrate Holi in style! ??

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" type="module" defer></script>
    <title>Happy Holi | Aoudumber Bade</title>

</head>
<body>
<div class="bbl">
    <label>
      
    </label>
</div>


<div class="box-c">
    <div class="cirle-box">
        <div class="outer-circle">
            <div class="inner-circle"></div>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <div class="container">
        <div class="cloud">
            <h2 style="font-weight: bold;">Happy Holii</h2>
        </div>
    </div>
</div>

    <div class="background_heart"></div>

 

</body>
</html>

CSS Code

@import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&family=Archivo:ital,wght@0,100..900;1,100..900&family=Bilbo+Swash+Caps&family=Inter:opsz,wght@14..32,500&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Pacifico&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Tiro+Devanagari+Marathi:ital@0;1&display=swap');

html,
body {
	height: 100%;
}
body {
	overflow: hidden;
	font: 16px sans-serif;
	color: #ddd;
	background-color: linear-gradient(90deg, #1a1a1a1b 50%, #33333300 50%), url('./img/image.png');

	user-select: none;
}

.bbl {
  z-index: 99999;
}
.bbl label {
  position: absolute;
  display: flex;
  width: 213px;
  flex-direction: column;
  margin: -28px;
  justify-content: center;
  gap: 8px;
  text-align: center;
  align-items: center;
  right: 24%;
  top: 36%;
  font-size: 1.2rem;
}

.bbl span {
  font-family: "Pacifico", sans-serif;
  filter: unset !important;
}

#bubbleGen {
  --w: 32px;
  position: absolute;
  left: 449px;
  top: 694.6px;
  width: var(--w);
  height: var(--w);
  /* bottom: 100px; */
  cursor: move;
  margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2);
  border-radius: 50%;
  background-color: white;
  transition: .2s transform;
}

#bubbleGen.dragging {
  transform: scale(1.4);
}

.bubble {
  position: absolute;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: dodgerblue;
  opacity: .6;
  transition: .1s opacity, .05s transform;
}

.bubble.pop {
  transform: scale(1.4);
  border: 8px solid dodgerblue;
  background-color: transparent;
  opacity: 0;
}

@media screen and (max-width: 658px) {

  body {

    margin-left: 79px;
  
}

.bbl label {
 
  right: -19%;
  top: 11%;

}

}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

:root {
    --clr: #0f0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    /* min-height: 100vh; */
    background: linear-gradient(rgb(0 0 0), rgb(0 0 0 / 76%)), url(./img/image.png);
    /* transform: scale(0.6); */
    margin-top: 40px;
    overflow: hidden;

}

.container {
    position: relative;
    top: 100px;
    height: 400px;
    width: 100%;
    display: flex;
    justify-content: center;
    animation: animateColor 5s linear infinite;
}

@keyframes animateColor {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}
.container .cloud {
    position: relative;
    width: 380px;
    z-index: 100;
    filter: drop-shadow(0 0 35px var(--clr));
}
.container .cloud h2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: #000;
    font-size: 2em;
    z-index: 1000;
    font-weight: 400;
    padding: 0 10px;
    border-radius: 10px;
    text-transform: uppercase;
    background: var(--clr);
}

.container .cloud h2::before {
    content: '';
    position: absolute;
    top: -115px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 100px;
    width: 120%;
    height: 100px;
    background: var(--clr);
}

.container .cloud h2::after {
    content: '';
    position: absolute;
    top: -150px;
    left: 25px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--clr);
    box-shadow: 120px -30px 0 10px var(--clr);
}

.container .cloud .drop {
    position: absolute;
    top: 60px;
    height: 20px;
    line-height: 10pxpx;
    color: var(--clr);
    transform-origin: bottom;
    animation: animate 2s linear infinite;
}

@keyframes animate {
    0% { transform: translateY(0) scaleY(0); transform-origin: top; }
    10% { transform: translateY(0) scaleY(0.25); transform-origin: top; }
    20% { transform: translateY(0) scaleY(1); }
    70% { transform: translateY(300px) scaleY(1); transform-origin: bottom; }
    80% { transform: translateY(300px) scaleY(1); transform-origin: bottom; }
    100% { transform: translateY(300px) scaleY(0); transform-origin: bottom; text-shadow: -180px 0 0 var(--clr), 180px 0 var(--clr); }
}

.box-c {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.box1, .box2, .box3 {
    width: 300px;
    height: 400px;
    background-size: cover;
    background-position: center;
}

.outer-circle {
    position: relative;
    height: 200px;
    width: 200px;
    background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
    border-radius: 50%;
    animation: rotate 1.5s linear infinite;
}

.outer-circle span {
    position: absolute;
    height: 200px;
    width: 200px;
    background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
    border-radius: 50%;
}

span:nth-child(1) { filter: blur(5px); }
span:nth-child(2) { filter: blur(10px); }
span:nth-child(3) { filter: blur(25px); }
span:nth-child(4) { filter: blur(150px); }

.inner-circle {
    height: 180px;
    width: 180px;
    position: absolute;
    background: url('https://w0.peakpx.com/wallpaper/393/203/HD-wallpaper-baby-krishna-radha-playing-holi-holi-lord-god.jpg');
    background-size: cover;
    top: 10px;
    left: 10px;
    border-radius: 50%;
    z-index: 9;
}

@keyframes rotate {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

    .background_heart {
        position: absolute;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        pointer-events: none;
    }
    .heart {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: red;
        transform: rotate(-45deg);
        animation: float 5s linear infinite;
    }
    .heart::before,
    .heart::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%;
    }
    .heart::before {
        top: -10px;
        left: 0;
    }
    .heart::after {
        left: 10px;
        top: 0;
    }
    @keyframes float {
        0% {
            transform: translateY(100vh) rotate(-45deg);
            opacity: 1;
        }
        100% {
            transform: translateY(-10vh) rotate(-45deg);
            opacity: 0;
        }
    }




  
    @import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&family=Archivo:ital,wght@0,100..900;1,100..900&family=Bilbo+Swash+Caps&family=Inter:opsz,wght@14..32,500&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Pacifico&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Tiro+Devanagari+Marathi:ital@0;1&display=swap');

html,
body {
	height: 100%;
}
body {
	overflow: hidden;
	font: 16px sans-serif;
	color: #ddd;
	background-color: linear-gradient(90deg, #1a1a1a1b 50%, #33333300 50%), url('./img/image.png');

	user-select: none;
}

.bbl {
  z-index: 99999;
}
.bbl label {
  position: absolute;
  display: flex;
  width: 213px;
  flex-direction: column;
  margin: -28px;
  justify-content: center;
  gap: 8px;
  text-align: center;
  align-items: center;
  right: 24%;
  top: 36%;
  font-size: 1.2rem;
}

.bbl span {
  font-family: "Pacifico", sans-serif;
  filter: unset !important;
}

#bubbleGen {
  --w: 32px;
  position: absolute;
  left: 449px;
  top: 694.6px;
  width: var(--w);
  height: var(--w);
  /* bottom: 100px; */
  cursor: move;
  margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2);
  border-radius: 50%;
  background-color: white;
  transition: .2s transform;
}

#bubbleGen.dragging {
  transform: scale(1.4);
}

.bubble {
  position: absolute;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: dodgerblue;
  opacity: .6;
  transition: .1s opacity, .05s transform;
}

.bubble.pop {
  transform: scale(1.4);
  border: 8px solid dodgerblue;
  background-color: transparent;
  opacity: 0;
}

@media screen and (max-width: 658px) {

  body {

    margin-left: 79px;
  
}

.bbl label {
 
  right: -19%;
  top: 11%;

}

}
     /* Cloud with Happy Holi Text */
     .container {
            position: relative;
            text-align: center;
        }

        .cloud {
            padding: 20px 40px;
            border-radius: 50px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            font-size: 24px;
            font-weight: bold;
            color: #ff4081;
            display: inline-block;
            position: relative;
            animation: floatCloud 3s ease-in-out infinite alternate;
        }

        @keyframes floatCloud {
            0% {
                transform: translateX(-10px);
            }
            100% {
                transform: translateX(10px);
            }
        }

JavaScript Code

const bubbleGen = document.querySelector( "#bubbleGen" );
const colorful = document.querySelector( "input" );
const bubbles = new Map();
const colors = [
    "deeppink", "magenta",          // Vibrant pinks
    "gold", "yellow",              // Bright yellows
    "limegreen", "springgreen",    // Electric greens
    "orangered", "coral",          // Fiery oranges
    "crimson", "red",              // Passionate reds
    "blue", "dodgerblue",          // Bold blues
    "mediumorchid", "violet",      // Royal purples
    "darkviolet", "turquoise",     // Jewel tones
    "fuchsia"                      // Bright pink-purple
];

let bubbleIdMax = 0;
let secForNextBubble = 0;
let currentTime = Date.now();
let previousTime = currentTime;
let bubbleGenX;
let bubbleGenY;
let bubbleGenW;
let dragging;

function lg( a ) { return console.log.apply( console, arguments ), a; }

window.onresize = () => {
	const bcr = bubbleGen.getBoundingClientRect();

	bubbleGenX = bcr.left + bcr.width / 2;
	bubbleGenY = bcr.top + bcr.width / 2;
	bubbleGenW = bcr.width;
};

bubbleGen.onmousedown = () => {
	dragging = true;
	bubbleGen.classList.add( "dragging" );
};

document.onmousemove = e => {
	if ( dragging ) {
		const st = bubbleGen.style;

		bubbleGenX += e.movementX;
		bubbleGenY += e.movementY;
		st.left = bubbleGenX + "px";
		st.top = bubbleGenY + "px";
	}
};
document.onmouseup = e => {
	if ( dragging ) {
		dragging = false;
		bubbleGen.classList.remove( "dragging" );
	}
};

function createBubble() {
	const bb = document.createElement( "bubble" ),
		st = bb.style,
		id = ++bubbleIdMax;

	bb.className = "bubble";
	bb.dataset.id = id;
	bb.dataset.speed = 2 + Math.random();
	bb.dataset.poptime = currentTime + ( 3 + 2 * Math.random() ) * 1000;
	bb.dataset.wave = Math.random();
	st.top = bubbleGenY + "px";
	st.left = bubbleGenX + ( bubbleGenW / -2 + Math.random() * bubbleGenW ) + "px";
	st.width =
	st.height = "0px";
	if ( colorful.checked ) {
		st.backgroundColor = colors[ Math.floor( colors.length * Math.random() ) ];
	}
	bubbles.set( id, bb );
	document.body.append( bb );
}

function frame() {
	currentTime = Date.now();
	if ( currentTime - previousTime > secForNextBubble * 1000 ) {
		createBubble();
		previousTime = currentTime;
		secForNextBubble = .1 * Math.random();
	}
	bubbles.forEach( ( bb, id ) => {
		const st = bb.style,
			y = parseFloat( st.top ),
			x = parseFloat( st.left ),
			w = parseFloat( st.width ),
			poptime = +bb.dataset.poptime,
			bbWave = +bb.dataset.wave,
			yInc = +bb.dataset.speed,
			wInc = .2;

		st.top = y - wInc / 2 - yInc + "px";
		st.left = x - wInc / 2 + ( w / 64 * Math.sin( bbWave ) ) + "px";
		st.width =
		st.height = w + wInc + "px";
		bb.dataset.wave = bbWave + .1;
		bb.dataset.speed = Math.max( .04, yInc - .005 );
		if ( poptime < currentTime ) {
			bb.remove();
			bubbles.delete( id );
		} else if ( poptime - 1 * 1000 < currentTime ) {
			bb.classList.add( "pop" );
		}
	} );
	requestAnimationFrame( frame );
}



// run ................................................
window.onresize();
frame();


function createHeart() {
	const heart = document.createElement("div");
	heart.classList.add("heart");
	heart.innerHTML = "❤️";
	document.querySelector(".background_heart").appendChild(heart);

	let size = Math.random() * 20 + 10;
	heart.style.fontSize = `${size}px`;

	heart.style.left = Math.random() * 100 + "vw";
	heart.style.animationDuration = Math.random() * 3 + 2 + "s";

	setTimeout(() => {
		heart.remove();
	}, 5000);
}

setInterval(createHeart, 300);

PHP Code

NO Need
Show Result

? Frequently Asked Questions (FAQ)


❓ 1. Can I use this Holi animation on my website?
✅ Yes! This code is free to use for personal and commercial projects.


? 2. Is this animation mobile-friendly?
? Absolutely! The animation is designed to work smoothly on all screen sizes, including desktops, tablets, and mobiles.


? 3. How can I change the heart color or speed?
?️ You can easily modify the CSS properties to change colors, sizes, and animation speeds.


? 4. Do I need any external libraries?
? No, this animation is built using pure HTML, CSS, and JavaScript, making it lightweight and efficient.


✨ 5. Can I add more effects to the animation?
? Yes! You can extend this animation by adding more colorful effects, background music, or interactive elements.


Enjoy the Holi celebration with this vibrant animation! ?? Let me know if you need any custom modifications! ?






Leave a Comment: 👇