Create a Dynamic Starry Night Background with HTML, CSS, and JavaScript

Creating a visually appealing background can enhance the overall user experience of a website. In this tutorial, we’ll explore how to create a dynamic starry night background using HTML, CSS, and JavaScript. This effect will feature twinkling stars that are randomly positioned and animated to create a mesmerizing night sky. 🌌✨

What You’ll Learn

✅ How to structure the starry night background with HTML & CSS 🌙
✅ Applying CSS animations to create a twinkling effect 🌟
✅ Using JavaScript to dynamically generate multiple stars ✨
✅ Randomizing star sizes, positions, and animation speeds for realism 🔮
✅ Enhancing the background to make it interactive and engaging 🎯

By the end of this tutorial, you’ll be able to create a beautiful, animated night sky that can be used in landing pages, hero sections, or as a full-page background. 🎥🚀

---

Step 1: Setting Up the HTML Structure

To start, let’s create a simple HTML file with a basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Starry Night Background</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <script src="script.js"></script>
</body>
</html>

---

Step 2: Styling the Stars with CSS

Now, let’s add CSS to create the night sky and twinkling effect.

body {
  margin: 0;
  overflow: hidden;
  height: 100vh;
  background: black;
  position: relative;
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  opacity: 0.8;
  animation: twinkle 2s infinite ease-in-out;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.3; }
}

The .star class styles each star as a small white circle. The @keyframes twinkle animation changes the opacity over time, creating a twinkling effect. 🌟

---

Step 3: Generating Stars Dynamically with JavaScript

Instead of manually placing stars, we use JavaScript to randomly generate them.

// Function to create multiple stars
function createStars() {
  const numberOfStars = 100; // Adjust for more or fewer stars
  for (let i = 0; i < numberOfStars; i++) {
    const star = document.createElement('div');
    star.classList.add('star');

    // Random size, position, and animation duration for each star
    const size = Math.random() * 3 + 1;
    star.style.width = `${size}px`;
    star.style.height = `${size}px`;
    star.style.left = `${Math.random() * 100}vw`;
    star.style.top = `${Math.random() * 100}vh`;
    star.style.animationDuration = `${Math.random() * 2 + 1}s`;

    document.body.appendChild(star);
  }
}

createStars();

This script creates 100 stars, giving each one a random size, position, and animation duration to make the effect more natural. ✨

---

Final Output 🎉

Once you add all the above code to your project, refresh your browser, and you’ll see a beautiful starry night background with twinkling stars! This effect can be customized further by:

• Changing the number of stars
• Modifying animation speeds and effects
• Adding shooting stars or constellation patterns

Live Demo & Source Code 🚀

Watch the complete tutorial video here:

Get the source code on GitHub:
📂 GitHub Repository

If you enjoyed this tutorial, like, comment, and subscribe to Madras Academy for more awesome web development tutorials! 🚀🌠

#HTML #CSS #JavaScript #WebDesign #BackgroundDesign #WebDevelopment #FrontendDevelopment #TechTutorial #InteractiveDesign #WebDesignInspiration 🎉