This content originally appeared on DEV Community and was authored by Manu Kumar Pal
This is a submission for Frontend Challenge - Halloween Edition, CSS Art.
Inspiration
The idea came from imagining an old spooky mansion that seems to watch you as you move — inspired by classic Halloween tales and atmospheric pixel art games.
The goal was to make something that feels alive without heavy JS — just CSS magic and creativity.
Demo
👉 Live Demo :- https://codepen.io/Manukumar10/pen/KwVZROM
Journey
This project was a fun mix of creativity and problem-solving.
I built every layer — the house, moon, fog, clouds, and graveyard — using CSS gradients, clip-paths, and keyframes.
Features
CSS-only haunted house using clip-path & gradients
Glowing moon with layered shadows
Animated drifting clouds & flickering windows
Parallax motion on cursor move (tiny JS)
Accessible and responsive design
Tech Used
HTML, CSS (gradients, keyframes, clip-paths, blend modes),
JavaScript (light parallax interactivity)
Final Thoughts
This project was a fun mix of design and code — using CSS to build a living, breathing haunted house scene.
It reminded me how powerful simple web tools can be when mixed with creativity.
Happy Halloween, and good luck to everyone joining the challenge! 🎃
This content originally appeared on DEV Community and was authored by Manu Kumar Pal
Manu Kumar Pal | Sciencx (2025-11-05T08:09:24+00:00) 🏚️ CSS Art: Haunted House with Parallax Layers. Retrieved from https://www.scien.cx/2025/11/05/%f0%9f%8f%9a%ef%b8%8f-css-art-haunted-house-with-parallax-layers/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.