Star Genesis
Live previewPerformance varies by device
No account needed to copy or download. Check dependencies and thelicense status before publishing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background 3: Star Genesis</title>
<style>
body {
margin: 0;
height: 100vh;
background-color: #000;
overflow: hidden;
}
.background, .foreground {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
}
/* Soft, distant twinkle */
.static-star {
position: absolute;
background-color: white;
border-radius: 50%;
box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.8), 0 0 8px 2px rgba(180, 220, 255, 0.45);
animation: twinkle 10s infinite;
}
@keyframes twinkle {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
/* The large gas cloud */
.nebula-cloud {
position: absolute;
width: 100%; height: 100%;
background: radial-gradient(ellipse at 50% 50%, rgba(127, 0, 255, 0.15) 0%, transparent 60%),
radial-gradient(ellipse at 20% 80%, rgba(0, 255, 221, 0.1) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(255, 0, 149, 0.1) 0%, transparent 50%);
animation: breathe 20s ease-in-out infinite alternate;
filter: blur(40px);
}
@keyframes breathe {
from { transform: scale(1) rotate(0deg); opacity: 0.7; }
to { transform: scale(1.1) rotate(20deg); opacity: 1; }
}
/* Star birth effect */
.forming-star {
position: absolute;
width: 4px; height: 4px;
border-radius: 50%;
background-color: #fff;
animation: star-birth 10s ease-out infinite;
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.static-star, .nebula-cloud, .forming-star { animation: none; }
}
@keyframes star-birth {
0%, 40%, 100% {
transform: scale(0.1);
opacity: 0;
box-shadow: none;
}
50% {
transform: scale(2);
opacity: 1;
box-shadow: 0 0 20px 5px #fff, 0 0 40px 12px #00eaff;
}
60% {
transform: scale(0.8);
opacity: 0.5;
box-shadow: 0 0 14px 4px #fff, 0 0 28px 8px #00eaff;
}
}
</style>
</head>
<body>
<div class="background" id="static-stars"></div>
<div class="nebula-cloud"></div>
<div class="foreground" id="forming-stars"></div>
<script>
const staticContainer = document.getElementById('static-stars');
const formingContainer = document.getElementById('forming-stars');
const numStaticStars = 450;
const numFormingStars = 80;
// Create background twinklers
for (let i = 0; i < numStaticStars; i++) {
const star = document.createElement('div');
star.className = 'static-star';
const size = 0.8 + Math.random() * 2;
star.style.width = `${size}px`;
star.style.height = `${size}px`;
star.style.top = `${Math.random() * 100}%`;
star.style.left = `${Math.random() * 100}%`;
star.style.animationDelay = `${Math.random() * -10}s`;
staticContainer.appendChild(star);
}
// Create bright, flaring stars
for (let i = 0; i < numFormingStars; i++) {
const star = document.createElement('div');
star.className = 'forming-star';
star.style.top = `${Math.random() * 100}%`;
star.style.left = `${Math.random() * 100}%`;
// Distribute the flares evenly across the 10s loop duration
star.style.animationDelay = `${Math.random() * -10}s`;
formingContainer.appendChild(star);
}
</script>
</body>
</html>About this animation
Formation of stars in a nebula.
Under the hood
CSS Radial-Gradient Nebula
Instead of a canvas, JavaScript creates DOM elements: 450 small
.static-star divs that twinkle via opacity keyframes and 80 .forming-star divs that flare and fade in a star-birth animation. The nebula itself is a blurred CSS radial-gradient layer animated with a breathe keyframe that slowly scales and rotates it.Related
