Floating Light Orbs
Home
Snippets
Floating Light Orbs
HTML
CSS
JS
<body></body>
* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background: radial-gradient(circle at center, #05010f, #000); overflow: hidden; display: flex; justify-content: center; align-items: center; } .orb { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.9), transparent 70%); box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.5); opacity: 0; animation: float 6s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 20% { opacity: 1; } 50% { transform: translateY(-150px) scale(1); } 100% { transform: translateY(-300px) scale(0.3); opacity: 0; } }
const createOrb = () => { const orb = document.createElement("div"); orb.classList.add("orb"); document.body.appendChild(orb); const size = Math.random() * 20 + 10; orb.style.width = `${size}px`; orb.style.height = `${size}px`; orb.style.left = `${Math.random() * 100}vw`; orb.style.animationDuration = `${3 + Math.random() * 3}s`; orb.style.animationDelay = `${Math.random() * 2}s`; orb.style.filter = `hue-rotate(${Math.random() * 360}deg)`; setTimeout(() => { orb.remove(); }, 6000); }; setInterval(createOrb, 200);
Ad #1
Ad #2
Scroll to Top