Creating visually appealing backgrounds can enhance the user experience and make your website stand out. In this tutorial, we’ll explore how to create a dynamic shape background using HTML, CSS, and JavaScript. This effect features randomly placed, animated shapes that change colors over time, bringing an interactive feel to your site.
What You’ll Learn
✅ How to create and animate shapes using CSS 🎨
✅ How to use JavaScript to generate dynamic elements 🔄
✅ How to make shapes move smoothly across the screen 🚀
✅ How to change the colors of elements randomly 🌈
✅ How to create an engaging background effect for your website 🎯
1. Setting Up the HTML
We start with a simple HTML structure that doesn’t require predefined shapes. Instead, we dynamically generate them using JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Shape Background</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Shapes will be added dynamically using JavaScript -->
<script src="script.js"></script>
</body>
</html>2. Styling with CSS
We use CSS to style the background and animate the movement of the shapes.
body {
margin: 0;
overflow: hidden;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #1a1a1a;
}
.shape {
position: absolute;
width: 50px;
height: 50px;
background-color: #ff6347;
border-radius: 50%;
opacity: 0.8;
animation: move-shape 5s infinite ease-in-out;
}
@keyframes move-shape {
0% { transform: translate(0, 0); }
50% { transform: translate(calc(100vw - 50px), calc(100vh - 50px)); }
100% { transform: translate(0, 0); }
}3. Generating Shapes with JavaScript
JavaScript is used to create and animate multiple shapes dynamically.
const shapeCount = 20;
function getRandomColor() {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
for (let i = 0; i < shapeCount; i++) {
const shape = document.createElement("div");
shape.classList.add("shape");
shape.style.top = `${Math.random() * 100}vh`;
shape.style.left = `${Math.random() * 100}vw`;
const size = Math.random() * 50 + 30;
shape.style.width = `${size}px`;
shape.style.height = `${size}px`;
shape.style.backgroundColor = getRandomColor();
document.body.appendChild(shape);
setInterval(() => {
shape.style.backgroundColor = getRandomColor();
}, 2000);
}Final Thoughts
By following this tutorial, you’ve learned how to create a dynamic background that adds motion and color to your website. This effect is ideal for creating engaging landing pages, portfolio designs, or simply enhancing the visual appeal of a webpage. Experiment with different shapes, colors, and animations to make it truly unique!
🎥 Watch the Tutorial Video:
📂 Code Repository:
GitHub – Dynamic Shape Background
If you found this tutorial helpful, don’t forget to like, comment, and subscribe to Madras Academy for more creative web development tutorials! 🚀