CSS Nightmares: Building a Haunted Scene That Actually Creeped Me Out

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

Inspiration

You know that feeling when you're watching a horror movie and everything seems just a little too quiet? That moment right before something jumps out? That's what I wanted to capture. I've always loved haunted houses and the creepy-crawly feeling of Halloween night, so I decided to pour all those spooky vibes into one terrifying CSS scene. The blood moon watching over everything, the spiders that seem to move when you're not looking directly at them, the ghosts that float just at the edge of your vision - it's all the stuff that made me sleep with the lights on as a kid!

Demo

See the horror come alive: Live Demo Here

Code & Resources

• Source Code:

  CourageCodeJourney / halloween-css-art-submission

  Pure CSS Halloween Art — a haunted night scene built entirely with HTML and CSS animations.

  🕸️halloween-css-art-submission

  Pure CSS Halloween Art — a haunted night scene built entirely with HTML and CSS animations.

  📂 Project Structure

  halloween-css-art/
  │
  ├── index.html        # Main HTML file that loads the CSS and displays the scene
  └── halloween.css     # All the styling and animations (core of the art)
  

  ---

  🧱 File Breakdown

  index.html

  • Contains the root structure of the Halloween scene.

  • Each <div> represents an object or animated element in the scene — e.g.

    • .blood-moon → glowing red moon
    • .haunted-house → central building with windows and doors
    • .spider, .ghost, .pumpkin, .skeleton, etc. → animated elements

  • The file only references one stylesheet:

    <link rel="stylesheet" href="halloween.css" />

  halloween.css

  • Defines all visual elements and animations for the scene.

  • Key techniques:

    • Positioning: Absolute layout to place each object precisely
    • Gradients: Used to paint every shape (no images used)
    • Animations: Controlled via @keyframes for motion…

  
  

  
  

  View on GitHub

  
  
• Built with: Pure HTML & CSS (no JavaScript!)
• License: MIT

Journey

Oh man, where do I even start? This project was equal parts "wow this is so cool!" and "why did I think this was a good idea?!"

The good, the bad, and the downright spooky:

I'll be honest - I almost gave up on the spiders. Getting those legs to wiggle naturally using just CSS transforms was driving me crazy! I must have rewritten those keyframes a dozen times. There was this one night I was working late, and the combination of the dark room and my own creepy creation actually made me jump when the lightning effect fired unexpectedly.

What surprised me:

• How much you can do with just ::before and ::after pseudo-elements (my HTML file is surprisingly clean!)
• The blood moon's pulsing effect turned out way creepier than I expected
• Those little demon eyes that blink randomly? They started as an afterthought but became one of my favorite details

The "aha!" moments:

• Realizing I could use CSS variables for the spider leg angles
• Figuring out how to make the ghosts look like they're floating unevenly
• Discovering that subtle glitch effect that makes the whole scene feel unstable

What I'd do differently next time:
I'd probably start with a better organization system for all those animations! My CSS file got pretty wild there for a while. Also, I learned the hard way that too many drop-shadows can really slow things down.

This project reminded me why I fell in love with CSS in the first place - it's like digital witchcraft. You're just typing these incantations and suddenly things move, glow, and come to life. Even after all the frustration, there's nothing quite like watching your creation breathe for the first time.

Now if you'll excuse me, I need to go watch some cartoons to get these creepy vibes out of my system! 🎃👻