🦇 Spooky Portal - Halloween CSS Art 🌙✨

#devchallenge #frontendchallenge #css #webdev

Frontend Challenge CSS Art Submission 🦇🎃

This is a submission for Frontend Challenge - Halloween Edition, CSS Art.

🎨 Inspiration

Halloween has always been about that magical mix of spooky and beautiful — the glowing moon, the flying bats, and the mysterious night sky.
I wanted to capture that cinematic moment when bats flutter under a full moon — purely with HTML and CSS (no images or JS needed!).

The goal was to make it feel alive — with random bat movement, glowing lights, and soft night colors that bring the Halloween vibe to life.

👻 Demo

Here’s the live version of my spooky CSS art:
👉 View Demo on GitHub Pages
🧩 View Source on GitHub

🕯️ Journey

This started as a simple CSS moon animation… and then the bats came in 🦇

What I learned:

Creating natural motion using @keyframes and animation-delay randomness.
Layering effects with pure CSS gradients and transforms.
Making light glows and depth using box-shadow and filter: blur().
Keeping it responsive and performant while keeping that “spooky magic.”

What I’m proud of:

The entire animation runs on zero JavaScript.
The bats randomly move across the sky, giving life to the art.
Smooth night ambiance created using CSS-only glow effects.

What’s next:

I’d love to expand this into a CSS Art Halloween Scene Generator, where each reload spawns a unique night sky with different moon and bat arrangements 🌕💫