🦇 Spooky Portal - Halloween CSS Art 🌙✨

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 🌕💫

🧡 Credits & License

Made with love by @dmsmenula 🧙‍♂️
Licensed under the MIT License.