This is a submission for Frontend Challenge - Halloween Edition, CSS Art.
🎃 Inspiration
I was inspired by the quintessential Halloween image: a glowing Jack-O'-Lantern on a dark night. However, I wanted to move beyond simple 2D representation. The core challenge was to achieve a sense of depth and realistic lighting—specifically the rough texture of the pumpkin skin and the flickering candle glow—using primarily pure CSS. This project aims to demonstrate that immersive 3D effects are highly achievable without heavy external libraries.
🎨 Demo
[Link to Live CodePen Demo Here] !
https://codepen.io/nad-Yunny/pen/yyepgMQ
✨ Journey
Process & Technical Challenges
The biggest hurdle was generating a realistic 3D depth and organic pumpkin texture without relying on WebGL or image files. I tackled this by:
Pseudo-3D Lighting: I used the pseudo-elements (:before and :after) on the main pumpkin div and layered on 12 different box-shadow properties. Each layer was designed with varying blur and color tones to simulate the pumpkin's ridges and complex spherical shape, creating a convincing illusion of depth.
Realistic Candle Flickering: This is the element I'm most proud of. I used a custom @keyframes animation to cycle through irregular changes in CSS filter: brightness() and opacity. This technique accurately mimics the random, subtle flicker of a real candle flame, establishing a deeply spooky atmosphere.
JavaScript Usage
I used a minimal sprinkle of JavaScript, solely for a mousemove function. This subtly alters the pumpkin's transform: rotateY() perspective when the user moves their cursor, which serves the singular purpose of showcasing the robustness of the CSS-only 3D construction.
Key Learnings
I gained a deeper appreciation for the expressive power of CSS filter properties. Learning how filter: drop-shadow() can be manipulated to simulate the actual light radiating outward from the carved eyes and mouth was a critical breakthrough for achieving realism.
Next Steps
I plan to integrate a ghostly, blurred element floating in the background using the backdrop-filter property to enhance the haunted atmosphere. I also want to connect the core flickering animation to a central CSS variable to make managing the overall project's mood simpler.
Licensing: This code is licensed under the MIT License.
Top comments (0)