DEV Community

Cover image for πŸŽƒ Haunted Halloween Night - Submission
MUHAMMAD USMAN AWAN
MUHAMMAD USMAN AWAN

Posted on

πŸŽƒ Haunted Halloween Night - Submission

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

Inspiration

My inspiration came from classic Halloween imagery and those spooky nights we all imagine on October 31st - a lonely graveyard on a hill, an old Victorian mansion with mysterious lights flickering in the windows, and all sorts of creepy creatures coming out to play. I wanted to capture that perfect Halloween atmosphere where everything feels just a little bit alive and watching you. The tilted tombstones, the creepy crawlies, and even the earth itself moving with worms all contribute to that "nothing is quite right" feeling that makes Halloween so delightfully spooky!

Demo

Haunted Halloween Night - CSS Art

Code

Journey

This project was an amazing exploration of what pure CSS can achieve! I started with the basic structure - the haunted house and ground - then kept adding layers of spookiness. Each element taught me something new:

What I learned:

  • Complex animations without JavaScript - I discovered how to choreograph multiple CSS keyframe animations to work together harmoniously. The ghosts float, bats fly and flap their wings, windows flicker - all synced at different intervals to create a living scene.
  • Creating depth with CSS - Using gradients, shadows, and layering techniques to make a flat 2D scene feel atmospheric and three-dimensional.
  • Building intricate shapes - The spider webs were particularly fun! I used a combination of radial lines and circular borders to create realistic-looking webs, then added crawling spiders with animated legs.
  • Organic movement - The earthworms wiggling out of the ground taught me how to create natural, lifelike motion using rotation and translation transforms.

What I'm proud of:

  • The flickering window effect that creates genuine unease
  • The spider webs with their radial pattern and crawling spiders - they add so much detail to the tombstones
  • The wiggling earthworms emerging from sandy earth - a last-minute addition that really brought the scene to life
  • Achieving smooth, staggered animations across multiple elements without any JavaScript

What's next:
I'd love to expand this project by adding:

  • More interactive elements (maybe click to toggle between day/night)
  • Additional creatures like black cats, witches on broomsticks, or zombies rising from graves
  • Sound effects that can be toggled on/off
  • Making it fully responsive for mobile devices
  • Possibly adding some subtle particle effects for fog or mist

Technical highlights:

  • 100% CSS animations (no JavaScript for animation logic)
  • 8 different animation types working in harmony
  • Pseudo-elements used extensively for details
  • Gradient mastery for atmosphere and depth

This project reminded me why I love CSS - it's not just for styling, it's a powerful creative tool that can bring entire worlds to life!

License

MIT License - Feel free to use this code for learning, inspiration, or your own spooky projects!

Happy Halloween! πŸŽƒπŸ‘»πŸ•·οΈ

Top comments (4)

Collapse
 
we-the-developers profile image
We The Developers

Wow, Amazing,

Collapse
 
usman_awan profile image
MUHAMMAD USMAN AWAN

Thank you πŸ™Œ

Collapse
 
sylwia-lask profile image
Sylwia Laskowska

Just WOW 🀩🀩

Collapse
 
usman_awan profile image
MUHAMMAD USMAN AWAN

Thank you πŸ™Œ