Radial Spark Burst — CSS Particle Explosion

Radial Spark Burst — CSS Particle Explosion

A pure-CSS particle burst — 200 individually animated sparks explode outward from center in a continuous alternating loop, cycling through a warm yellow-to-green glow with radial-gradient fills and colored box-shadow halos. No JavaScript, no build step required to use it.

---

What's Included

• 200 individually keyframed circular particles, each with a unique explosion target position and staggered animation delay
• Continuous 1.5s infinite alternate loop per particle — creates a constant cascading burst rather than a single one-shot explosion
• Deep radial-gradient vignette background (#222 → black) makes the glowing particles pop
• Each particle: radial-gradient fill + colored box-shadow glow + matching border, for a spark/ember look
• Smooth HSL-based color progression across all 200 particles (warm yellow-green through amber)
• 3D perspective wrapper (perspective: 500px) gives particles depth as they launch from translateZ(-1000px)
• Zero JavaScript — pure HTML + CSS

---

Dependencies

None — plain HTML and CSS, zero external libraries or scripts.

---

Desktop Preview

---

Source Code

Because this component is built from 200 individually keyframed particles, the full HTML and CSS run long. Instead of pasting the entire markup and stylesheet here, grab the complete, ready-to-use source from GitHub:

🔗 View Source on GitHub

The repository contains:

• index.html — the .wrap container with all 200 .c particle divs
• style.css — the full compiled stylesheet with all 200 keyframed particle blocks

Clone or download the repo and drop both files into your project — no build step required.

---

Built by MetaSkillGroup — copy it, use it, make it yours.