Neon Glow Birthday Celebration Card
By AI Quick Tool
20 Feb, 2025 · 3 hours ago
184 Views
This project is a trendy and futuristic birthday celebration web page featuring a glassmorphism card with a neon glow effect. The page includes aesthetic cosmic gradients, animated text, and an interactive firecracker animation to enhance the festive atmosphere. The design focuses on asymmetry, vibrant colors, and a modern typography style to create a visually stunning and engaging user experience. The page dynamically generates multiple firecrackers that burst and fade, creating an exciting and immersive birthday celebration effect.
Project Overview
This project is a modern and interactive birthday celebration webpage featuring:
- Glassmorphism birthday card with a stylish neon glow effect.
- Animated firecrackers dynamically generated for a festive effect.
- Futuristic gradient background for a trendy 2025 aesthetic.
- Smooth animations for text and visual elements.
How to Run the Project
1. Download or Copy the Code
- You can copy the provided HTML file and save it as index.html.
2. Open in a Browser
- Simply double-click the index.html file, and it will open in your default web browser.
- No additional setup is required.
Project Structure
1. HTML File (index.html)
- Contains a glassmorphism card with a "Happy Birthday" message.
- Includes a firecracker animation using <div> elements dynamically created with JavaScript.
- Uses Google Fonts for stylish typography.
2. CSS Styling (Inline in <style>)
- Background Gradient: Cosmic deep space look.
- Glassmorphism Effect: Transparent card with a blur effect.
- Neon Glow Text: Gradient text with animated glow.
- Firecracker Animation: Simulated fireworks with bursting effects.
3. JavaScript (Inside <script>)
- Dynamically generates firecrackers with random colors, positions, and animations.
- Each firecracker animates upward, bursts, and fades out for a realistic effect.
Conclusion
This Neon Glow Birthday Celebration Card is an eye-catching and interactive way to wish someone a Happy Birthday online. It runs directly in any browser without any setup, and you can personalize it easily.
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Birthday - Trending 2025</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Poppins:wght@400&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(145deg, #0f0c29, #302b63, #24243e); /* Trending deep cosmic gradient */
overflow: hidden;
}
.card {
position: relative;
width: 520px;
padding: 60px 40px;
background: rgba(255, 255, 255, 0.05); /* Ultra-transparent glassmorphism */
backdrop-filter: blur(15px);
border-radius: 40px 20px; /* Asymmetric corners */
border: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 0 50px rgba(255, 0, 110, 0.3), 0 0 100px rgba(0, 245, 212, 0.2); /* Neon glow */
text-align: center;
color: #fff;
z-index: 2;
animation: float 4s ease-in-out infinite;
transform: rotate(-2deg); /* Slight tilt for asymmetry */
}
.card h1 {
font-family: 'Orbitron', sans-serif; /* Futuristic font */
font-size: 3.5em;
margin: 0 0 20px;
text-transform: uppercase;
letter-spacing: 5px;
background: linear-gradient(90deg, #ff00ff, #00ffcc, #ffcc00); /* Neon gradient */
-webkit-background-clip: text;
color: transparent;
animation: pulseGlow 2s ease-in-out infinite;
}
.card p {
font-family: 'Poppins', sans-serif;
font-size: 1.5em;
line-height: 1.6;
color: #d0d0ff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}
/* Firecracker Animation */
.cracker {
position: absolute;
width: 12px;
height: 12px;
background: #ff00ff; /* Neon magenta default */
border-radius: 50%;
z-index: 1;
animation: burst 2s ease-out infinite;
}
.cracker::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: inherit;
border-radius: 50%;
animation: sparkle 0.6s ease-out infinite alternate;
box-shadow: 0 0 15px currentColor; /* Glowing effect */
}
.cracker::after {
content: '';
position: absolute;
width: 4px;
height: 20px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent); /* Trail */
border-radius: 50%;
transform: translate(-50%, 100%);
animation: trail 2s ease-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-20px) rotate(2deg); }
}
@keyframes pulseGlow {
0% { text-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffcc; }
50% { text-shadow: 0 0 20px #ff00ff, 0 0 40px #00ffcc, 0 0 60px #ffcc00; }
100% { text-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffcc; }
}
@keyframes burst {
0% {
transform: translate(-50%, 100vh) scale(0);
opacity: 1;
}
50% {
transform: translate(-50%, 40vh) scale(2);
opacity: 0.9;
}
100% {
transform: translate(-50%, -20vh) scale(0);
opacity: 0;
}
}
@keyframes sparkle {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(3); opacity: 0; }
}
@keyframes trail {
0% { height: 20px; opacity: 0.8; }
50% { height: 40px; opacity: 0.5; }
100% { height: 0; opacity: 0; }
}
/* More crackers with trending colors */
.cracker:nth-child(2n) { background: #00ffcc; animation-duration: 2.2s; } /* Neon cyan */
.cracker:nth-child(3n) { background: #ffcc00; animation-duration: 1.9s; } /* Neon yellow */
.cracker:nth-child(4n) { background: #ff007a; animation-duration: 2.4s; } /* Hot pink */
.cracker:nth-child(5n) { background: #00ccff; animation-duration: 2.1s; } /* Electric blue */
.cracker:nth-child(6n) { background: #cc00ff; animation-duration: 2.3s; } /* Vibrant purple */
</style>
</head>
<body>
<div class="card">
<h1>Happy Birthday!</h1>
<p>To my incredible best friend,<br>Your day deserves to shine brighter than these neon crackers—full of joy and epic vibes!</p>
</div>
<script>
// Dynamically add more firecrackers
const body = document.body;
const crackerCount = 80; // More crackers for a trending, chaotic effect
for (let i = 0; i < crackerCount; i++) {
let cracker = document.createElement('div');
cracker.classList.add('cracker');
cracker.style.left = Math.random() * 100 + '%';
cracker.style.animationDelay = Math.random() * 2.5 + 's';
cracker.style.width = Math.random() * 10 + 8 + 'px'; /* Random size 8-18px */
cracker.style.height = cracker.style.width;
body.appendChild(cracker);
}
</script>
</body>
</html>Related Projects
Elevate Your Brand with a Modern Landing Page Template
This modern, futuristic landing page is designed to elevate...
ViewRomantic 3D Love Box with Floating Hearts
Experience a mesmerizing 3D rotating love box with floating...
ViewNeon Glow Birthday Celebration Card
This project is a trendy and futuristic birthday celebration...
View