Neon Sphere Grid
Home
Snippets
Neon Sphere Grid
HTML
CSS
JS
<div class="grid" id="grid"></div>
body { margin: 0; height: 100vh; background: #000; display: flex; justify-content: center; align-items: center; overflow: hidden; } .grid { display: grid; grid-template-columns: repeat(10, 20px); grid-gap: 15px; } .dot { width: 20px; height: 20px; background: radial-gradient(circle, #00ffff, #ff00ff); border-radius: 50%; animation: float 2s infinite ease-in-out; } @keyframes float { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.8; } 50% { transform: translateY(-20px) scale(1.2); opacity: 1; } }
const grid = document.getElementById('grid'); for (let i = 0; i < 100; i++) { const dot = document.createElement('div'); dot.className = 'dot'; dot.style.animationDelay = `${Math.random()}s`; grid.appendChild(dot); }
Ad #1
Ad #2
Scroll to Top