Halloween Night Scene - A Spooky CSS Art

#frontendchallenge #devchallenge #css

Frontend Challenge CSS Art Submission 🦇🎃

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

Inspiration

Classic Halloween tales, eerie silence, flickering lights, and that feeling of being watched these inspired the tone of the piece. The goal was not just to show a scene, but to create a mood, a blend of calm and unease, beauty and fear.

Demo

Note: For the best experience, view this on a desktop browser at 100% zoom. The layout and animations are handcrafted and may appear differently on other scales.

Journey

It’s pure CSS art brought to life through subtle animation and atmospheric storytelling. The idea was to create a scary Halloween night scene that feels alive, mysterious, and cinematic.

Sky & Stars: A deep night sky filled with stars that blinks and appear in random places using JavaScript simulating the twinkle of distant galaxies.
Glowing Moon: A full moon that pulses in brightness, casting its glow across the landscape.
Witch & Clouds: A witch glides across the moon, while clouds drift slowly to give the scene depth and life.
Haunted House: A chilling house with flickering window lights and in one window, a pair of blinking eyes watches you from within.
Graveyard: Five tombstones marked with R.I.P. quietly rest near the trees, wrapped in the ghostly glow of the night.
Ghosts: Two ghosts roam one hanging on the tree with red eyes, fading in and out; another wandering around the graveyard.
Pumpkins & Barricade: Five glowing pumpkins guard the entrance, their flickering light adding warmth to the darkness.
Trees & Owl: Bare trees stretch across the scene; an owl blinks occasionally, silently observing the world below.
Chimney Smoke: Wisps of animated smoke rise gently, bringing subtle realism to the haunted house.