This content originally appeared on DEV Community and was authored by Menula De Silva
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
@keyframesandanimation-delayrandomness. - Layering effects with pure CSS gradients and transforms.
- Making light glows and depth using
box-shadowandfilter: 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.
This content originally appeared on DEV Community and was authored by Menula De Silva
Menula De Silva | Sciencx (2025-11-04T06:17:37+00:00) 🦇 Spooky Portal – Halloween CSS Art 🌙✨. Retrieved from https://www.scien.cx/2025/11/04/%f0%9f%a6%87-spooky-portal-halloween-css-art-%f0%9f%8c%99%e2%9c%a8/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.