The Haunted Clock Tower: A Cinematic Halloween Scene with Pure CSS

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

Inspiration

My inspiration for this project was the classic gothic horror aesthetic, blended with the cinematic feel of modern Halloween films. I wanted to create a scene that felt alive, atmospheric, and hauntingly beautiful, not just a static or cartoonish image. The goal was to build a living world—a tall, imposing clock tower under a full moon, with drifting fog, flickering lights, and creatures of the night—using nothing but HTML and CSS. The challenge was to see how much depth, texture, and life could be achieved with only code.

Demo

Journey

This project was a fantastic exploration of what's possible with modern CSS. My process was iterative, starting with the largest elements and progressively adding details and animations.

Foundation: I began by setting the scene: a dark, radial-gradient sky and a glowing full moon. The tower itself was shaped using clip-path to achieve a gothic, non-rectangular silhouette.

Atmosphere: To avoid a flat look, I added layers of drifting fog using blurred, translucent gradients with alternating animations. The randomly generated stars (the only part that uses a sprinkle of JS) and slow-moving clouds brought the sky to life.

The Tower Details: I refined the tower by adding a brick-like texture and overgrown vines using multiple background layers on a pseudo-element. The mix-blend-mode property was key to making the vines look like they were naturally part of the stone. I also added small gargoyle silhouettes with clip-path to complete the haunted look.

Animation and Life:

The Clock: The clock hands are animated to show the current time, thanks to a bit of JavaScript that sets their initial position and then hands off to a CSS animation loop.

The Bats: This was one of the most fun parts. Initially, the bats just flew in circles. I refactored their animations completely so they now fly in from outside the viewport, swoop across the scene, and fly out again. Staggering their animation-delay makes the effect feel continuous and less repetitive.

The Pumpkins: To really sell the Halloween theme, I added glowing jack-o'-lanterns. They have different faces and a flickering glow animation. A small script coordinates them to pulse together occasionally for a surprising effect.
I'm particularly proud of how the layers and animations work together to create a sense of depth and life. The fact that there are no images, SVGs, or complex libraries involved—just one HTML file with CSS—is what makes this project special to me.

For the future, I might experiment with adding a lightning strike effect that briefly illuminates the entire scene, or perhaps more interactive elements that react to mouse movement.